Everything looked terrific in FireFox, Opera, Safari… but on The Most Popular Web Browser In The World, PCIEv6, at Smaller and Smallest text sizes, the words on the page vanished! All I got was (http://www.unl.edu/iswork/images/Bob.gif) the two images. If I made the text larger, it reappeared. If I hovered another window over my browser and then took it away, the text reappeared. If I clicked on the browser and dragged the cursor, it would select the text and it would reappear. But at the two smaller sizes, it vanished on Refresh or the initial page load.
This turns out to be a Known Bug, affectionately called the Peek-A-Boo Bug, which results when a clearing item touches a floated item within a liquid container, in this case #maincontent. I sent the fix to Bob and Brett and they have incorporated it into the default.css stylesheet, so it should be everywhere by now. If you've ever seen this behavior in your own pages, it should be repaired, now. Here's the fix.
- Code: Select all
/* This line hides everything from Mac IE \*/
* HTML #maincontent {
height: 1%;
}
/* This line closes out this rule for Mac IE */
If you step through this, the first comment tag does not close in Macintosh IE, because it has trouble with the escape character \ before the asterisk in the closing of the comment tag. Everything until the second */ pairing is completely ignored by Mac IE. For everyone else, the rule says "any time you have a container that comes under an HTML tag that itself comes under any tag at all, set the height to 1% of the viewport".
Well, the only browser that assumes a tag ahead of "<HTML>" is Internet Explorer, in both Mac and PC versions. IE thinks there's a "layout" tag or something similar before HTML, so it goes ahead and assigns the lower size to the box, which serves to shrink-wrap it, which keeps it from touching the cleared footer which keeps it from displaying the bogus white layer between the images and the text. Everyone else sees the <HTML> tag as the top, so Opera, Safari and all of the Firevixen skip the rule entirely. Neat, huh?