Jump to content
xisto Community
Sign in to follow this  
suicide1405241470

IE6 display:block hides other image BUG

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

#logo {margin-bottom: -3px;}
or
img { display: block}

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.