If you have visited my site earlier, than you may have noticed that it looks terible when opened with IE6. Today I decided to fix this issue, cause you can't be blind to the fact that the majority of the users use IE6, although Firefox is far superior. Maybe things will change in the next IE7 version. Time will tell.
So, here's what was giving me headaches in the past few hours:
These are screenshots of how this site was rendered by IE6 and Firefox, respectively. You can notice from these pictures(you can click on them to view fullscreen) that IE6 puts blank space between every row of my table layout design, no matter that the appropriate attribute cellspacing and the appropriate attributes in CSS were set to 0!
The root cause:
This is the code that was causing this spacing between rows in IE6:
|
This same code will cause these different behaviours in IE6 and Firefox, respectively:
As you can see, the pictures which are in adjacent rows, will be wrongly interpreted in IE6, making a free space between the rows which will make you table-layout design totally unusable and unsightly.
So, what's the solution?
This code will make both browsers to render it the same way:
|
If you can believe it, the only difference(marked with italic style) is that the enclosing