[Solved] Extra space below DIV

[evf]

Hello,

I am having issues with the top navigation at this site:
http://voicesforchildrenstl.org.previewdns.com/

In Firefox and Safari (Mac), there is about a 15px space between the bottom of the navigation and the divs below it. The dropdown menu also shows up 15px below. In Internet Explorer, there is a 1px gap, but there should be none. Any ideas what may be causing this? I’ve tried setting the padding on the navigation to 0 and plugging in different things using Firebug, but I am having no luck.

Any help on this would great!

[TheDoc]

The huge amount of space is being caused by:

Code:

#content {
line-height:1.7;
}

The 1px has something to do with the <a on mouse over>, but I can’t quite put my finger on it.

[evf]

That made the space a lot smaller! Thanks. There is still a gap there of a couple of pixels. I will continue to play with it.

[evf]

Wow. There is something definitely wrong with my code, as it shows up perfectly in IE now. I still have no clue what it is.

[evf]

Alright. After much searching, I’ve solved my problem. I added:

Code:

#topNavigation img{
vertical-align:bottom;
}

If anyone out there has similar issues, here is a great resource https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

[Author]

Posts