I am in the process of learning CSS for layout and, of course, have discovered many differences in how pages are rendered in browsers.

The problem I have is that small gaps appear ABOVE the navigation bar images in IE6, but BELOW the images in Firefox.

Also, is there a way to fill the entire left floated column (from header to footer) with a background image or color, other than adding several non-breaking spaces to the div to keep it open so that it is as least as big as the main div?

Thanks

test page:
http://www.peaceofchristparish.org/C...z_diamond6.htm

CSS
body {
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
margin: 0px auto;
width: 912px;
}

#main {

font-size: 100%;
padding: 0px;
margin: 20px 0px 0px 0px;
background-color: #fff;
}


#sidebar {
background-color: #fff;
font-size: 80%;
padding: 0px 5px 0px 20px;
margin: 20px 0px 0px 0px;
display: inline;
line-height: 1.4em;
}


#sidebar a:link {
color: #3300CC;
text-decoration: none;
}



#sidebar a:visited {
color: #CC00CC;
text-decoration: none;
}



#footer {
background-color: #85B30B;
color: #fff;
text-align: right;
padding: 5px;
margin: 0px;
font-size: 90%;
font-weight: normal;
}

#header {
background-color: #ffffff;
margin: 0px;
height: 130px;
background-image: url(images/banner_background_10x136.JPG);
background-repeat: repeat-x;
}






#nav{
display: inline;
}

#nav ul{
padding: 0;
margin: 0;
background-color:#fff;
}

#nav ul li{
display: inline;
padding: 0;
margin: 0;
}

#nav ul li a{
font-size: 90%;
color: #fff;
background-color: #fff
text-decoration: none;
padding: 0px;
margin: 0;
width: 9em;
}

#nav ul li a:hover, #nav ul li a:focus{
background-color: #fff;
}


#nav img{
border:none
}





#drinks {
background-image:url(images/background3.gif);
font-size: 80%;
padding: 0px 20px 0px 5px;
margin: 0px 10px 0px 0px;
display: inline;
line-height: 1.4em;
height;
}

h1 {
font-size: 120%;
color: #8CB616;
}

h2 {
font-size: 110%;
color: #3399FF;
}



a:link {
color: #0033CC;
text-decoration: none;
line-height: 1.4em;
}

a:visited {
color: #CC33CC;
text-decoration: none;
line-height: 1.4em;
}

#sidebar {
float: right;
width: 160px;

}

#main {
margin-right: 190px;
margin-left: 190px;
zoom:1;
}

#drinks {
float: left;
width: 160px;

}

#footer {
clear: both;
}


#footer a:link {
color: #fff;
text-decoration: none;
}


#footer a:hover {
color: #fff;
text-decoration: underline;
font-weight: normal;
}


#footer a:visited {
color: #fff;
text-decoration: none;
}




.img_left {
float: left;
}

One way to help avoid the gaps is to assign a style to the image of display:block; or you can use inline if images are next to each other.

Thanks for the tip. I re-checked the CSS and made some modifications but there is still a large gap above the nav bar images in IE6, and a small gap below in Firefox.

Any other ideas or IE6 hacks?

http://www.peaceofchristparish.org/C...z_diamond7.htm
http://www.peaceofchristparish.org/C...z_diamond7.css

So adding:

#header img {
  display: block;
}

in your stylesheet doesn't do it?

Thanks, that did work in IE. Firefox still shows a small gap underneath the header.

I must have specified display: block in the ID #header {} and not in the descendant #header img {}.

But if the image is displayed as a block-level element, with a line break before and after the element, shouldn't that cause a gap?

http://www.peaceofchristparish.org/C...z_diamond7.htm
http://www.peaceofchristparish.org/C...z_diamond7.css

That gap is coming from the <a> tag and may have to do with the scripting you're using for the drop-down.