IE6 display problems solved

I’ve finally managed to fix the display bugs plaguing readers using IE6. This site looked fine in Opera / Firefox, but IE users had many sidebar problems, including: images that were partially invisible, inconsistent spacing of text, plus all sorts of text-sometimes-appearing-sometimes-not weirdness. Turns out that they were all to do with an IE6 whitespace bug, officially called Whitespace-in-Lists, and this page told me all I needed to know.

If you have any kind of HTML list element, either <ol> or <ul>, IE6 will add extra whitespace between the <li> elements. This normally isn’t a problem, but when there are margins of other elements close by the rendering gets all screwy – it seems like IE isn’t accounting for the extra height when trying to render other elements, although I don’t know this for sure. For whatever reason, the way around the problem is to define a width for the <ol> or <ul> elements. For example: ul { width:100%; } will handle it in the majority of cases, or you may need to specify a pixel width.

Hopefully the site looks much neater for people using IE6, now. Please let me know if you see any bugs.