FAHNZ

MODE

Jul 31 2009

Why Are We Coding for IE6 Again?

Internet Explorer 6 sucks. We all know it. We all hate it. We all Most of us still have to deal with it. This is a problem I had run into before and it took me forever to figure out how to solve it this time. May as well document it here so I (and hopefully anyone else) can find it easily next time.

The problem:
Links styled with a background image are incorrectly tiling that background image. Or to put it another way; IE6 is not properly rendering the background of an inline element has a no-repeat background set. The example below shows the same link style applied in different places on the same page. As you can see, it renders the area for the background image position and dimension correctly, but it repeats the image within the confines of the actual arrow image dimensions (where it should show up). Man, that’s weird to try to explain. Hopefully the image below helps.

The problem shown:

Examples of IE6 background repeat and positioning problem

The CSS code:

.more-link {
 padding-right: 15px;
 font-weight: bold;
 text-transform: uppercase;
 background: url(../images/common/readmore-arrow.gif) 100% 1px no-repeat;
}

The HTML code:

<a href="#">View more</a>

The solution:
The solution is stupidly simple. I had figured it out before on a previous project, but of course couldn’t remember what the solution was. I just remembered it was something simple to implement. Anyway, as I emphasized above, the problem seems to be that the no-repeat background is set on an inline element. I guess that confuses IE6. Go figure. The browser is coming up on being a decade old.

The solution shown:

IE6 inline background problem - fixed

The updated CSS code:

.more-link {
 display: inline-block; 
 padding-right: 15px;
 font-weight: bold;
 text-transform: uppercase;
 background: url(../images/common/readmore-arrow.gif) 100% 1px no-repeat;
}

Voila! Tell IE to keep the element inline, but treat it like a block. Plus it shouldn’t adversely affect other browsers. Problem solved.