Alright, I know, I'm a staff member, I shouldn't be asking for help. Well I am!
To see the issue, go to
Helping Hands Home Services - Contact Us
Now, for the explanation. This was a group project for school for a legitimate customer. My group won the contract and the customer requested some modifications. All of them were implemented fine except one, moving the Google maps to the top of the column.
If you view the page in IE, it works perfectly fine. In any other browser, it puts a giant space before the form. I've figured out that if I disable the list-style-type and display attributes on lines 207 and 208, it will remove the space from before the form. It also reveals the bullets of the lists (I can hide all of them again in a separate CSS call) and reveals a break in the page for the bullet containing the map.
Looking at the code, I determined that changing the display forced the line break, but is also causing the space above the form because the form is aligning to the top of the line for the bullet. Beyond that, I can't explain where that line break came from, nor why hiding the list bullets would cause this issue. It seems that I can't have either the display: block; or the list-style-type: none; enabled on that list, because both cause the issue.
What boggles my mind even more, I've determined that if I remove the <img> and just have text, there are no issues at all.
I'm good with CSS, but as a programmer, I love tables. Using <div>'s and <p>'s is murder for me. I've even tried removing the <img> from the list and have it stand alone, but had no change in the spacing effect.
Any ideas or suggestions that do not involve me rewriting the entire page or removing it from the <div> would be greatly appreciated.
