This is a boring post about fixing a couple of tedious Internet Explorer CSS bugs. But I want to record it for my own records and for future Google searchers.
1) The IE Italics bug – in the past I used italics whenever I quoted somebody. However on certain CSS designs, italics breaks the width settings of my page for IE users (90-95% of the population). In my design, it stuffed up the right-hand vertical line. Looked bad.
I found a comprehensive explanation and fix for this bug. It worked. Incidentally, positioniseverything.net is a fantastic resource for CSS designers. It covers a lot of other bugs and workarounds – and best of all it provides practical examples to back up the theory.
2) The second bug I never discovered a name for. But here’s a description of it: my main content text is is in the middle column and aligned to the left. However the alignment got nudged a couple of pixels to the right at the point where the content in the left-hand floating menu column stopped and the main content continued on down the page. So the bug was only noticeable when the menu content was shorter than the middle column content. Anyways I fixed it by giving the body tag and all div tags below it height = 100%. I got this tip from a designer at work, who’d fixed the same bug on a project website. Here’s his explanation (much better than I could word it):
“Because there is no initial height measurement for the html page you can’t dynamically force divs past their contained content to the bottom. The inclusion of the ‘height: 100%;’ in the body tag gives the [content] div a measurement to calculate its height from. So if I give the [content] div a height of 100% it will fill to the bottom of the page (or any px measurement I care to have). Then give the sidenav div a height of 100% so it will fill to the bottom of the [content] div.”
Note this also seems to have fixed some jerky scrolling issues in the Mozilla browser.
So that’s my latest round of CSS bug-swatting. Do let me know if you spot other bugs. I haven’t even tested the old browsers (smack on the hand with a ruler!), but frankly because this is a personal website I’m mainly concerned with Web Standards-compliant browsers.
Originally published on ReadWriteWeb (archived copy)