eSpace Blog RSS
17Nov

IE6 Background Image Problem

3

Imagine that you have a blog and you are designing a new rating system where you will use the golden stars to rate your entries, so you make an HTML prototype to create the layout of your new rating system. Here is the code you have written:

  1 <html>
  2     <body>
  3         <h1>
  4             <div id="stars">
  5             </div>
  6             How is the BG IMG fixed in IE
  7         </h1>
  8     </body>
  9     <style>
 10         #stars{
 11             height: 20px;
 12             width: 100px;
 13             float: right;
 14             background: url("star_on.png") repeat;
 15         }
 16     </style>
 17 </html>

The "star_on" image you are using is 20 x 20 px, the height of the stars' DIV is 20px to fit with the image,  image is set to repeat, and the width is set to 100px so that you will see 5 stars.

So far we have done the coding; the next step is to test this on the browsers to be supported. It works well with different browsers ( tested on safari, opera, FF and chrome ) and here is how it is displayed:

When the turn came for testing this with IE and its unique rendering engine, it decided to render the markup as seen below:

 

Note that the problem is that the image is repeated vertically and goes beyond the 20px high DIV it should display within.

Let's start with the fix and then see why IE decided to extend the image.

The fix is to adjust the font-size property for the rating DIV :

     1 #stars{
  2     height: 20px;
  3     width: 100px;
  4     float: right;
  5     background: url("star_on.png") repeat;
  6     font-size: 1pt;
  7 }

But how on earth is the font-size related to the BG image ?!

In fact, the problem is that when IE passes by an empty DIV in the markup, it assumes a non-breaking-space (&nbsp;) inside the DIV, then accordingly it applies to it the nearest inherited font size - in our case the H1 font-size, which is larger than the 20px height so the BG image found some more space to sneak into.

So in order to solve this, you have to override this font-size and adjust it to have your background image displayed correctly.

 Written By:

Michael Youssef (blog.michaeleee.com)

 

 

Comments

1 chrisb wrote: on Tuesday, November 18, 2008:

A style-element underneath the body, a div in a h1 Headline - both invalid HTML.
Pretty much senseless to complain about rendering errors, if the underlying HTML code is crap.

I'm not doubting that this problem might also occur with valid code - but providing such is the very basis of a serious discussion about such issues.

2 Michael wrote: on Wednesday, November 19, 2008:

Sure the HTML code in not valid HTML, but this is a demo or else I should have added the style in a separate CSS file and this blog entry will be talking about HTML standards not addressing a specific problem, and I meant to add the style tag at the end of the code for the logical flow of the sample, so you can read the HTML first then the styles applied on it.

Anyway you get the point, this will be also a problem in a valid HTML.

3 Jonathan Head wrote: on Monday, February 09, 2009:

Michael, please ignore chrisb's comments. Your post about this problem has saved me hours of banging my head against the wall. It's a very real problem that any web designer who is used to coding to web standards will encounter with frustration at some point. Many thanks for explaining the problem, the fix, and posting it here!

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments