IE height problem

[hoochblues]

I have a site I have set up (www.vozeirao.com (http://www.vozeriao.com)) that renders as follows in Firefox, IE7 and Opera.

http://www.vozeirao.com/myimages/firefox example.gif

When it renders in IE6 it renders as follows.

http://www.vozeirao.com/myimages/ie6 example.gif

I confess. I drew in the line for the above screen print. Couldn't do a capture on the machine with IE6. But it gives the idea.

The CSS/HTML for the div in question, #logo-wrapper, looks like this -



#logo-wrapper {
background-color: #ffcc33;
height: 60px;
margin: 5px 0 0 0;
padding: 0 0 0 0;
}
<div id="logo-wrapper">
<img alt="" src="{site_url}/myimages/{template_group_name}/site-logo.jpg" />
</div> <!-- end #logo-wrapper-->


The physical size of the jpg is 60px. I have the height set to 60px. When I use the bookmarklet Mouse DOM Rollover it says the height is 62px. Given that it is picking up the background of #logo-wrapper, I assume it's picking up a padding of 2px somewhere.

I'll also point out that the nav-bar below is absolutely positioned. I don't know if that contributes.

I have a feeling this is something staring me in the face. But can't figure it out.

Thanks.

Walt

[ItsMeOnly]

you used newline after <img> tag, it should render ok, when you put the tag inline... also you could try


#logo-wrapper img {
margin: 0;
}

[hoochblues]

you used newline after <img> tag, it should render ok, when you put the tag inline... also you could try


#logo-wrapper img {
margin: 0;
}


Jeez. Shows what I know! :)

Thanks