« WotW: Intuitive Sudoku Widget
WotW: Easy Envelopes »
Jul 31

IE6 Hides CSS Images

CSS

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.

This entry was posted on Tuesday, July 31st, 2007 at 5:11 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “IE6 Hides CSS Images”

  1. Adude Says:
    September 11th, 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 11th, 2008 at 9:41 am

    Perhaps you need to add keywords

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

Leave a Reply




  • Meta