IE6 Hides CSS Images

CSS 31 July 2007 | 5 Comments

Otherwise titled, "Multiple background images + the bane that is IE6". This explanation is in reference to my July 2007 CSS Off code.

This is how it’s supposed to beIn coding the design for the Early Bird h1 overlay, I implemented two overlapping background images: the pretty bird, and a horizontal grey bar.

PLAIN TEXT
CSS:
  1. /* Code for the horizontal grey bar */
  2. #login{
  3.     background: #F7F7F7 url(../images/bg-header.gif) repeat-x 0 bottom;
  4.     color: inherit;
  5.     margin: 0;
  6.     padding:  10px;
  7.     text-align: right;
  8. }
  9. #login span{
  10.     display: block;
  11.     margin:  0 auto;
  12.     width:  900px;
  13. }
  14.  
  15.  
  16. /* Code for pretty, pretty birdie */
  17. #header h1{
  18.     background: url(../images/logo.gif) no-repeat left top;
  19.     height: 189px;
  20.     margin:  -26px 0 0 0;
  21.     padding: 0;
  22. }

IE6 Hates MeWhether I ought to have made it a CSS background-image or an HTML img is irrelevant at this point, as I found an annoying IE6 bug regarding multiple seemingly unrelated CSS background-images.

The bird background-image was hidden by the horizontal top bar. To resolve this, I used IE6 filters to hide the HTML img and display CSS background-image for modern browsers, but to display the HTML img in the case of IE6.

PLAIN TEXT
HTML:
  1. <p id="login">
  2.     <a class="s508" href="#primary-content">Skip to Primary Content</a>
  3.     <span><a href="http://www.apple.com">Log in</a> or <a href="#">Register</a></span>
  4. </p>
  5.  
  6. <div id="header">
  7.     <h1>
  8.         <img src="assets/images/logo.gif" alt="Early Bird WormSearch">
  9.     </h1>
  10.         <form action="index.html" method="get" class="search">
  11.             <input name="search1" alt="Search" type="text">
  12.             <button class="search">Search <img src="assets/images/white-right-arrow.gif" alt=""></button>
  13.         </form>
  14. </div>

PLAIN TEXT
CSS:
  1. #header h1 img{
  2.     display: none;
  3. }
  4. * html #header h1{
  5.     background: none;
  6.     position: relative;
  7.     margin: 0px 0 0 0;
  8. }
  9. * html #header h1 img{
  10.     display: block;
  11.     position: absolute;
  12.     margin: -26px 0 0 0;
  13. }

Why does IE6 present the background-image overlap issue? The Early Bird h1 required position:relative. Why? Because IE6 hates me with the fire of a thousand suns. If you discover a better reason, kindly let me know, as I find this animosity between IE6 and myself most unsettling.

Really, semantically, we should not be using a background-image if there was meaning associated with the image. I was torn in this case, as it really is subjective whether the item necessitates semantic meaning or not. The method I implemented in my example really displays how both methods can work: HTML img with the IE6 code, and background-image with modern browsers.

In conclusion: if your background-images are improperly overlapping in IE6, try adding a position declaration on the hidden element.

Share and Enjoy:
  • del.icio.us
  • Digg
  • Twitter
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • email
  • Print

5 Responses on “IE6 Hides CSS Images”

  1. Adude says:
    September 11, 2008 at 9:39 am

    You know, I searched EVERYWHERE for this little bit of info. I cannot believe this is that uncommon.

    Thank you!!

  2. Adude says:
    September 11, 2008 at 9:41 am

    Perhaps you need to add keywords

    multiple background images IE Internet explorer IE6 IE7 hides hidden CSS background

  3. Deangelo Bevell says:
    December 20, 2009 at 3:25 am

    Wow! You really covered this topic well. If I wanted to know more, do you have any other resources that you would suggest?

Trackbacks/Pingbacks

  1. When to use IMG vs. CSS background-image? — HTMLCoderHelper.com says:
    November 9, 2010 at 3:09 pm

    [...] Use IMG for multiple overlay images in IE6. [...]

  2. The Choppr - Your Design & Our XHTML - The only place to get your design chopped up! says:
    January 21, 2011 at 5:50 am

    [...] Use IMG for multiple overlay images in IE6. [...]

Leave a Reply