IE CSS Fieldset border extends too far to the right: Why??

Question

I have defined a fieldset in HTML, and applied the following (simple) CSS rules to it:

fieldset { margin: 2em 0; position:relative; padding: 1em; border:1px solid #ccc; }

Everything is great, no big deal, except in all versions (well, up to 7 as far as I know) of IE the top border -- but not, interestingly, the bottom border -- of the fieldset visually extends too far to the right by about 25px, beyond where the vertical border is on that side.

It is worth noting that this element's width causes it to be outside its parent element width-wise to the right, when viewed in Firebug for example.

What is causing this problem in IE? Is this a known issue, and, if so, what is the fix / hack / workaround?

Answer 1

Could you post more of your code, like the HTML of what's surrounding the fieldset and the corresponding CSS rules for that?

You mentioned that you can see it's wider than its parent element in Firebug. That's almost certainly related. Can you change the CSS of the parent element to make it wide enough to contain the fieldset?

Without a little more context, it's probably going to be tough to diagnose this more accurately...

Answer 2

I don't know the fix, but this might be part of it:

http://labs.tom-lee.com/fieldsettest.html

Answer 3

I've struggled with this one for some time; tonight I finally found the answer.

http://www.sitepoint.com/forums/showthread.php?t=526881

To quote NatalieMac:

Seems that if you have an element inside the fieldset that's overflowing to the right of the fieldset, it extends the top border. I had a container set to a width of 100% with no padding or margins which IE7 thought was overflowing for some reason (even though the content inside this container was right-aligned and viewable within the border of the fieldset).

I was able to fix it just by adding overflow:hidden to the fieldset.

I can confirm that this does indeed fix the issue for me as well.