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, then you made an HTML prototype to create the layout of your new rating system, and here is the code you have written:
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 hieght of the stars DIV is 20px to fit with the image, the image is set to repeat and the width is set to 100px so that you will see 5 stars.
So far we have done coding, the next step is to test this on the browsers to be supported, in different browsers it is working well ( tested on safari, opera, FF and chrome ) and here is how it is displayed:
When it was the turn for the lovely 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 go beyond the 20px high DIV it should display within...
Lets 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 :
2 height: 20px;
3 width: 100px;
4 float: right;
5 background: url("star_on.png") repeat;
6 font-size: 1pt;
7 }
But why on earth the font-size is related to the BG image ?!
In fact, the problem is when IE pass by an empty DIV in the markup it assume anon-breaking-space 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 hieght so the BG image found some more space to sneak into.
So to solve this you had to override this font-size and adjust it to have your backgroung image displayed correctly!
