Under certain circumstances, floated images will simply not show up in Internet Explorer 5 and 6. Here is a straightforward solution.
Internet Explorer Bug, Vanishing Images
I came across a bug in IE a few weeks ago, and it took me quite some time to track down the solution. For as common as the cause is, I was quite surprised to discover how long it took me to run across the fix.
In Internet Explorer 5 and Internet Explorer 6, images that are floated oftentimes disappear. Indeed, they show up for a fraction of a second after the page loads, and then simply vanish.
In my testing, I didn't find any difference in HTML ordering, although I wasn't extremely thorough. Adding a float class directly to the image or in a surrounding <div> makes no difference, the images still do not show up. Fortunately, the fix is quite simple! Just add three lines to your CSS. file and the problem is solved. No hacks, no conditionals, just pure, validating CSS.
- img {
- position: relative;
- }
For as many headaches I got from dealing with Internet Explorer's inadequacies, it was a slap on the face when I realized how simple the solution is. Relative positioning is the magic fix in IE, so try it out if you've got some odd quirk that's causing you grief!
