Fieldset Border Bug in IE
There are many problems with the way that fieldsets are rendered across virtually all browsers. This is yet another for the IE pile, and it only happens in obscure circumstances, so I'm not too surprised I haven't seen it posted elsewhere.
If you apply a negative margin to the top or bottom of an input or select element in a fieldset that has a legend, the top border of the fieldset will be repeated at the position of each input or select element. Sound a little murky? Check out the test page.
The test page has a strict doctype, but the bug also occurs with transitional doctypes. I've confirmed the bug in IE 5, IE 5.5, and IE 6. Let me know if you have a workaround!
If you apply a negative margin to the top or bottom of an input or select element in a fieldset that has a legend, the top border of the fieldset will be repeated at the position of each input or select element. Sound a little murky? Check out the test page.
The test page has a strict doctype, but the bug also occurs with transitional doctypes. I've confirmed the bug in IE 5, IE 5.5, and IE 6. Let me know if you have a workaround!
posted by tom at 1:47 PM
6 Comments:
Related info may be found
here.
I had the exact same problem, thanks to your post, I've been able to fing out that negative margin-top on one of my elements was the reason.
The error does not occur, hovewer, if you use border-bottom (or left/right) - only top border gets repeated.
Unfortunately, i couldn't find any workaround and had to simulate top border with a background image.
Ditto; I also had to make a fake top border with a background image.
I end up doing (having hit your site from google) is to have a background color on the form, and a nested fieldset with a bg color of white.
Yes, it's kind of cheating, but it degrades nicely and plays well with all browsers.
Instead of using the background-image to simulate a border to your fieldset, try to set a top border the color of ur form background( if possible in your design)
fieldset{
border: 0 solid #fff;
border-bottom: 1px solid red;
}
It had a pixel but if you can afford it. :D
Thank you for posting this! I just want to add that it also happens in IE7 on windows. My "work around" was just to change all the css so I wasn't using negative margins inside a fieldset.
Post a Comment
<< Home