I just solved the strangest Internet Explorer CSS bug I’ve encountered to date. Everything looked great in Mozilla, Netscape 7, Safari, and Opera. I had a smart, two-column layout I’d adapted from layouts by CSS geniuses Alex Robinson» and Mark Newhouse». As long as the browser window was maximized, everything was fine. But when it was resized in IE, there were a number of points, usually only a few pixels wide, where the content column simply dropped below the level of the sidebar—completely off the screen. I shuddered to realize that if a viewer happened to have his window sized to any of these “magic” widths (which seemed almost random) they wouldn’t see any content at all, just a header and a menu!
So it began. I searched everything I could for information on this bug, from CSS books, to my favorite CSS sites, to Google searches with every combination of keywords I could think of. Nothing! Nothing I had read could account for this. I tested other stylesheets in my preferred layout. Some broke, some didn’t, and the ones which broke, broke in different places!
So my layout wasn’t buggy, but by now, I was going buggy! At least I could concentrate my search for the bug in the styles rather than the structure. The worst one was the Forest stylesheet (which is the default index page on my personal site.) I had noticed from the beginning that the problem was worse the smaller the window became—the “magic” points were closer together. Finally, I realized it was related to word-wrapping in some hyperlinked movie titles in my most recent post. I tried using Microsoft’s “word-wrap” property, which helped nothing. At odd points, when these italicized hyperlinked words wrapped down to the next line, the content DIV would fall away. Italicized words. (I may be one of the few designers who actually uses the recommended CITE tag for titles, and CITE renders as italics by default.) Not expecting anything, I typed “IE CSS bugs italics,” and found
the page that explained everything».
Italics! How could the bug be italics? Every word processor in the last 20 years has handled italics. as has every Web browser from Netscape 1 on. How could Internet Explorer 6 mangle them? (Answer: it mangles them effectively as it mangles many things.) Sarcasm aside, IE panics when calcuting width for italics in boxes that are beside floats. This is a nefarious problem that seems to be almost unknown compared to, say, the Box-Model bug. Nefarious, because when can you guarantee that your client will not need italic text, maybe a LOT of italic text, whether it’s an extended quote, a long title, or an emphasized sentence? Understanding this potential layout-destroyer should be as well understood as float bugs and box-model bugs.
There is a fix, and it’s not as simple as styling CITE and EM as “font-style:oblique,” (which doesn’t work, in case you were wondering, the bug affects anything with a slanted type). Bruno Fassino explains all that is known about it at this time on a page at the Position is Everything page. My very brief explanation of the fix, which follows, is no substitute for his lucid work, but I think more pages explaining this are desperately needed.
The key is to add styles to the lowest-level block element which contains the italic text. This will almost always be either a P, DL, UL, OL, BLOCKQUOTE, or DIV tag. Often it’s a direct parent, but sometimes, as in the case of my CITE tags within A tags, the lowest-level block is a grand-parent or higher. The styles must be visible only to Internet Explorer for Windows, and not only that, but there are two mutually exclusive stylings needed, one set for IE Win 5.5+, and another for IE Win 5.0.
IE 5.0 Win must make the width of the containing block 100%, and give it the overflow:hidden style. IE 5.5+ Win must give it an auto-sized width, a minimal height, and visible overflow. The stylesheet snippet below hides it from all non-IEWin browsers, and feeds the corrected styles to the proper versions of IE rather painlessly. For details, see IE and Italics Problem» at Position is Everything.net.
/* \*/
* html p, * html dl, * html ul,
* html ol, * html blockquote, * html div {
overflow: hidden;
overflow: visible;
width: 100%;
width: auto;
height: 1%; }
/* */
An alternate solution would be to use IE Win’s conditional comments in the HTML. Peter Paul Koch at Quirksmode» makes an excellent case for using conditional comments rather than parser hacks. I sometimes use them, but sometimes prefer to put them in the stylesheets—they don’t mix well with stylesheet switchers, for instance.
Eye candy is pretty, by definition. But too much is too much, and AT&T’s new browser, Pogo seems to suffer from the vast amount of resources demanded by its attempt to make the most mundane Web tasks (finding a bookmark, for instance) a breath-taking overdose of eye-catching beauty. Here’s Ars Technica’s review of Pogo.
