IE6 display:block hides other image BUG

Hi everyone,

I have a problem. I have two images, and one has the 3px IE bug. Turning this to a block level element fixes it but then an image to the right disapears. Another fix I have tried is an IE hack with -3px margin which makes the bottom line up but then the top is off.

Here is the CSS in question.



code:--------------------------------------------------------------------------------#masthead {
width:100%;
background-color:#4F6DB1;
background-image: url(../images/layout/blg_gradient.jpg);
background-repeat:repeat-x;
}
#logo {
position:relative;
z-index:1;
display:block;
}
#mastheadImages {
position:absolute;
top:17px;
left:0;
width:100%;
}
#mastheadImages img {
margin-right:10px;
float:right;
}
--------------------------------------------------------------------------------


And a small chung of markup.


code:--------------------------------------------------------------------------------
<div id="masthead">
<a href="index.php"><img id="logo" src="../images/layout/blg_logo.gif" width="418" height="152" border="0" alt="The Beaches Living Guide" /></a>
<div id="mastheadImages"><img src="../images/layout/blg_title_images.jpg" alt="photos" width="544" height="105" />
<div id="topSmallNav"><div><?=getPageLinks();?></div></div>
</div>
--------------------------------------------------------------------------------


If I take the block out of #logo the image image blg_title_images shows up but blg_logo has a 3px space under it. If I leave block in the space goes away and so does blg_title_images.

Sorry I don't really have a working example as I am using a hack to get around it right now, but it doesn't look perfect.

Any ideas? Oh and should I even bother mentioning that it works fine in Fire Fox.

 

 

 

Comment/Reply (w/o sign-up)

Have you tried making both images display: block? From what you mentioned, you can try:

or

Also, you have absolute positioning there. Unless absolutely necessary, you shouldn't need to use position: absolute. IE6 support is becoming less and less, because most people use either IE7 or alternative browsers now. You may want to consider dropping support for IE6, and let the browser render the page the way it wants to.

Comment/Reply (w/o sign-up)