So I've got a nice floated form layout that works beautifully in FF and Chrome, but not IE (shock, horror!):
So, off to testing I go and the first shot across the bow is to add in a 1px pink border to the FIELDSET on IE to see where it's borders lay, and this is what I get:
...neat IE, neat. So I remember something about "display" triggering something or other in IE's layout engine to make stuff behave like they should, so I'm off to see the Google. But it seems the hasLayout stuff is an IE7-ism.
Specifics are thus-ly: The element not positioning correctly is a FIELDSET. It only has a single CSS attribute against it; "white-space: nowrap;" (tags underneath it are styled with floats). Adding the "new" clearfix doesn't work.
So.. anyone have any ideas on what the heck is going on in IE? Also, as an aside, the conditional statements don't seem to be working for me (...) which is also just weird.
Agh... the warmth and glow of remembering why I hate IE so very, very much...
Isn't it always the way? You take the time to do a write-up for StackOverflow, and as you post it something comes into focus that you didn't see before?
So... it seems that the cause of this is related to IE9 not setting a width during the render. When the border was put on the FIELDSET it forced a width of at least 2px which was enough to force the wrap. Setting a width of 0px still caused the issue, but with a width of 1px (or more) it wrapped as expected. In the end I simply added in a "clear: left" to the CSS class (which is arguably proper anyway as that is what I expect) and all was again right in the world.
So... in some cases, it seems that IE9 will not set a width on a rendering (rendered?) element (a FIELDSET in this case). This probably has something to do with the hasLayout stuff, but I'm not 100% certain. This may have been caused by the fact that all elements within the FIELDSET are being FLOAT'd left.
fieldsetorframeset- powerbuoy 2012-04-04 05:02