Gap in CSS layout in Mozilla

[Spookster]

Make the bad man stop!!!!!!!

Ok i've been torturing myself with this for awhile now. This is my first design where I plan on using CSS for layout. I'm about to go back to table layouts. Grrrrrrr.

http://www.designqueue.com/worldbazaar/test.htm

In mozilla there is a gap at the bottom of the header div, and a small gap at the top of the left column and content column div's. Everything looks fine in IE6.

I've tried everything I can think of but it won't go away. :(

Here is my style sheet:



body{
background-color: #CCCCCC;
width: 700px;
margin: 0px;
}

#pageFrame{
background-color: #FFFFFF;
}

#header{
display: inline;
}

#leftColumn{
float: left;
background-color: #000000;
}

#contentColumn{
width: auto;
}

#innerContentColumn{
margin-right: 50px;
margin-left: 150px;
}

#footer{
clear: left;
}

#innerFooter{
text-align: center;
}

#innerContentColumn{
height: 100%; /* fix the Win32 IE float bug */
}

#contentColumn>#innerContentColumn{
height: auto; /* fix Opera which breaks with the above IE fix */
}

#innercontentcolumn{
height: 100%; /* fix IE 5.0 which parse the Opera fix, note the selector is all lower case */
}



What is causing these gaps in Mozilla?

[liorean]

That's because on inline elements (and you specify the div#header as inline) images are in mozilla correctly placed on the baseline. At least as long you aren't in quirks rendering mode. This can be corrected in a number of ways:

line-height: 0;
vertical-align: bottom;
display: inline-block;

(and more that I can't remember right now)

Note that all of these corrections provide some problem or other with accessibility. display: inline-block should be the one causing least problems, though, as long as it's specified after display: block;

[meow]

Read the classic. :D
http://devedge.netscape.com/viewsource/2002/img-table/

[Catman]

#leftColumn{
float: left;
background-color: #000000;
margin-top : -5px;
}

[Spookster]

Originally posted by Catman
#leftColumn{
float: left;
background-color: #000000;
margin-top : -5px;
}

That works just fine. :D Thank you.