I found a solution. IE 5.0 does do
overflow: hidden just fine. So I can use an empty comment hack to set this rule in IE 5.0 and use the more correct
overflow: visible in IE 5.5 and 6.
The pros: no horizontal scrollbars, no dropped columns.
The cons: 1-5 pixels (or so) of the text box containing the italics will get clipped and hidden.
Thank the maker for this blog. It gives me a place to rant about a specific problem. And when I do that it gives me an exercise to organize my thoughts. I can usually go find a solution after I bitch on here, and this time is no different. This
overflow hack is working beautifully in IE 5.0.
Of course.. if you have hidden overflow, anything that normally goes beyond the borders of the column like, oh I don’t know, a drop down menu will be hidden as well. *sigh*
I did find another workaround that keeps the columns from dropping, but it leads to a horizontal scrollbar under certain conditions (viewport widths). But it’s targeted at IE/Win 5.0 only. So maybe that’s a decent compromise.
So my thought was/is to revisit Skidoo Too and update it, throw in a few new bits, maybe add a page of actual instructions on how to use and implement the layout. But first I wanted to rework the CSS and my traditional means for that is to simply start over from scratch.
So that’s what I’ve done. Immediately I find new ways to structure the markup (not major, minor changes really) and new ways to structure the CSS. This time I wanted to document as much as possible on all the bugs I encountered. Early in the process I’ve discovered something that’s a bit disheartening.
This is a bug, a very old bug, in IE that has regarding italicized text (maybe bold too? or even text-transformed text? never tested that). What happens is the width for a given line of text is calculated without figuring in the increased width of the italicized text. And as IE resizes parent elements to make their children fit, the parent of an block of text with italics will be increased in width to make room. In CSS layouts that are “pixel perfect” this creates a big problem. Floated elements (columns) are dropped down until there’s room enough to fit.
I had found early in the development of the original Skidoo that setting the
overflow property on these floated elements resolved the issue nicely. But not.. it seems.. in IE 5.0. Even with the
overflow property set the columns are still being pushed down.
Now the easiest solution is to simply not use italics at all, but that’s very unrealistic. So now what?
Under specific conditions all Skidoo-related layouts break in IE/Win 5.0. This is a bit frustrating. I can’t seem to find a workaround.
I know it’s IE 5.0.. it’s many years old and the number of people using it today have got to be relatively small, but still…