Why the blazes won't this display correctly in Internet Explorer?

December 13, 2005 10:47 AM

We use an internal survey tool which automatically generates and collates web-based surveys. It wasn't written by me. I'm having a problem with one particular page; have a look at the following:

Linky
(I've also done a simplified test case here)

The page displays perfectly well in Firefox, Mozilla, Safari etc.

BUT: In IE on a PC, I've got the following problem:

• The text of the first 3 questions displays sometimes, but mostly doesn't. If they do display, refreshing the page will make them disappear.
• The last 2 questions never appear.
• The question options (A, B, C etc.) and the background boxes are fine.
• If you minimise the page, then maximise it, the first three questions re-appear. Refresh, and they're gone again.

Has anyone seen something similar before? My investigations seem to point to the JS used for validation (or an IE bug, of course) but I've been hacking at it all afternoon and still haven't fixed it!

(The form submission won't work since this is a saved copy of the file on our intranet)
Thanks all.

posted by blag to Computers & Internet (14 answers total)

Does the HTML & CSS validate?
posted by slater at 10:54 AM on December 13, 2005

Response by poster: Hmm. The version on our intranet validates as XHTML 1.0 Transitional. CSS is also fine. The version I've uploaded for you to look at won't validate - I did a "Save Page As..." from within IE and that seems to have mangled the page by inserting a "loose" HTML doctype. But the problem discussed above manifests itself in both versions.

I'll try and get the original PHP file uploaded so you can look at it as it's meant to be.
posted by blag at 11:10 AM on December 13, 2005

Oops, I forget that Meta accepts HTML.

The missing code that's the problem is:

<DIV style="CLEAR: both"></DIV>
posted by justkevin at 11:22 AM on December 13, 2005

Response by poster: OK, this is what is being sent to the browser:
Link

(It still fails validation but only because of the lack of end tags. They're in the original document but are getting stripped out somewhere along the line, probably the "Save As.." process. The page validates fine on our server. You'll have to trust me on this ;) )
posted by blag at 11:24 AM on December 13, 2005

I don't know what's causing this off the top of my head but if's bound to be covered in one of these pages.

The first thing I'd do is make sure your doctype is correct and that you're not invoking quirks mode.

Then I'd try it with all the JS removed.

If that still doesn't tell you what it is, start removing style rules. Reduce it down to the bare minimum that still shows the problem.
posted by Rhomboid at 11:32 AM on December 13, 2005

Response by poster: justkevin: I've removed all three instances of <DIV style="CLEAR: both"></DIV> but the problem persists for me. See this example. How did you manage to get the problem to go away? Thanks.
posted by blag at 11:46 AM on December 13, 2005

This is the problem:

.questionnumber {
}

You're telling it to provide a null result. I copied the source code and gave it the .question class instead and it worked fine.
posted by bikergirl at 12:01 PM on December 13, 2005

Response by poster: bikergirl: thanks, but that doesn't seem to solve the problem either. I've taken out the empty declaration and the question number SPANs but no no avail. The text keeps disappearing on refresh.

This example has no javascript, no clearing DIVs and no questionnumber classes. And it still won't display...

This is very weird; I've never seen anything like it before. Hair coming out in clumps.
posted by blag at 12:51 PM on December 13, 2005

That is really bizarre. It has something to do with the floating of the .halfcolumn divs. If you take out the width:48%; from that class, it seems to fix it, although I have no idea why. But then the buttons probably aren't where you want them. And if you put in a clear:both; to get the buttons where you want them, the problem comes back.

So odd. I'd just stick those radio buttons in a two-column table and be done with it.
posted by staggernation at 1:56 PM on December 13, 2005

Response by poster: /bangs head against table, swears never to design in CSS again. Thanks for everyone's help - I'm going to recreate it as a table.

Though, if anyone's keen I'd still be interested to see what the root cause was.
posted by blag at 7:09 PM on December 13, 2005

Best answer: Without doing any testing or anything, it's hard to say, but could it have been the Peekaboo bug?
posted by AmbroseChapel at 1:56 AM on December 15, 2005

Response by poster: AmbroseChapel- you may have saved my sanity! That looks like the exact problem. I'll try some of the suggested fixes and report back. Thanks.
posted by blag at 5:17 AM on December 15, 2005

Response by poster: Just realised that I never came back to this thread to follow-up, sorry. AmbroseChapel was correct - it was IE's Peekaboo bug. I solved it by adding the Holly Hack to the CSS:

/* Hides from IE5-mac \*/
* html .question {height: 1%;}
/* End hide from IE5-mac */

Thanks again for everyone's help.
posted by blag at 5:58 PM on February 20, 2006