Vanishing Text in PC IE.

A place to ask questions and get help. Be the first on your block to post ...

Vanishing Text in PC IE.

Postby MarkHiatt » Wed Oct 05, 2005 12:01 pm

This week, I put together a page with two screenshots in it. I wanted text to start at the top, with the Headings, then flow in-between the two images and fill out again on the bottom.

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 ( 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?
Posts: 36
Joined: Mon Jul 26, 2004 3:09 pm
Location: '501' Building - Room 123.1

Thanks, Mark.

Postby rcrisler1 » Fri Oct 07, 2005 3:13 pm

Thanks, Mark.

That's the first we've ever heard of an issue with PC IE. : )

Robert J Crisler
Manager, Internet and Interactive Media
University Communications
321 Canfield Administration Building
University of Nebraska-Lincoln
Site Admin
Posts: 153
Joined: Wed May 12, 2004 12:20 pm
Location: Lincoln

Return to Help & Assistance

Who is online

Users browsing this forum: No registered users and 1 guest