IE bug with truncation of page

April 6, 2005 2:39 PM

I stumbled across an Internet Explorer display problem today that I just can't figure out. It feels CSS-related, and it feels float-related, but despite knowing all about the Holly Hack and all about how to deal with most every float-related IE bug I've seen prior to today, this one has me totally stumped. Can someone help?

I have a page with a column floated to the right, and in the non-floated section (the page to the left of the column), a form with two select dropdowns. The first dropdown calls a JavaScript function which then populates the second dropdown (via Ajax/XMLHttpRequest/whatever you call it).

When I load the page in IE initially, everything looks perfect. When I choose something from the first dropdown, the second dropdown populates like it should -- and the column to the right all of a sudden gets truncated. Literally, the bottom 10 to 20 pixels just disappears.

Has anyone seen this before? Does anyone know what's causing it, other than the general float-related problems that IE seems to have?

posted by delfuego to computers & internet (4 answers total)

To trace an unknown bug back to one of the documented IE bugs, you need to at least narrow your situation down to a specific triggering condition or set of conditions. But without that minimalist markup/stylesheet example, here goes some wild speculation: it sounds like populating the select makes it bigger so IE makes the containing block bigger, then the altered block trips the [pick a culprit ...how about Peek-A-Boo...?] bug.
posted by nakedcodemonkey at 4:15 PM on April 6, 2005

...or maybe you've found a way to trigger Guillotine with a select instead of a link...?
posted by nakedcodemonkey at 4:21 PM on April 6, 2005

(Feh. This could go on all day. Better idea: test the ApplyIE7 favelet on your page. If it shows IE7 can make your mystery bug go away, at least that's an easy hack to install, even though you won't have the causal info.)
posted by nakedcodemonkey at 4:32 PM on April 6, 2005

it sounds peek-a-boo-related. many odd peek-a-boo issues can be defeated by introducing a height (any height) to the element affected. i use the underscore hack to prevent other browsers from seeing it.

so if your original is this:

div.foo {width: 250px; background: pink;}

the new one is this:

div.foo {width: 250px; _height: 10px; background: pink;}

that's assuming you don't have a height in there already.
posted by o2b at 8:09 PM on April 6, 2005