This was a repost of content found on the netscapes blog.
- it does not matter if the elements are contained in a fieldset
- input type=”checkbox” and type=”radio” are not affected
The fix / hack
- wrap your bug-affected input / textarea elements in any inline element, like a span (if you’re okay with that .. I’m not)
Or, if possible:
- set display: inline on the block-level hasLayout parent element, or similarly, remove the css property that’s triggering hasLayout (width, etc) on the block-level parent element (not possible in most cases)
- remove side margins on all parent containers of the form element (suggested by Barry Jaspan, who points out this solution also may not be realistic)
- set an IE-only negative margin on the affected form elements (also from Barry, who agrees with you this is needlessly messy, to the point where CSS purists may start throwing heavy objects)
- include text on the same line just before the form element (yep, Barry again, nice catch. Not possible if you want the text above the form element.. for example,
some textdoesn’t work)
- any others?
Other sites with information on this bug
- Paul van Steenoven’s test page
- the test page, expanded to show situations where Paul’s overflow: hidden fix does not work
- quirksmode report
- Barry Jaspan did a nice writeup, which was later covered by positioniseverything. I’m rather bitter, since I did my writeup about the bug about a month prior. Granted, Barry covered the issue more in-depth, and he also points out that the affected form elements actually inherit the sum of the side-margins of all parent elements, AND provided several more methods to work around the bug.
This entry was posted on Thursday, October 26th, 2006 at 8:08 am and is filed under internet explorer bugs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.