Comments on: Getting Fieldset Backgrounds and Legends to Behave in IE

By: NaM - The French frog x)

NaM - The French frog x) — Wed, 06 Jul 2011 22:41:00 +0000

Thanks a lot for both tricks! As mentionned by Fentex, after have applied the first trick, another problem was still there : the top-border of the fieldset that overflows to the right. I simply deleted the top border and thanks to the background applied to my fieldset i don’t need to add any other trick!! This is just perfect! Thanks so much x)

By: chanteur06

chanteur06 — Wed, 18 Aug 2010 10:37:00 +0000

Wonderful ! TKS a lot!

By: לימודי הנדסת מכונות

לימודי הנדסת מכונות — Fri, 13 Aug 2010 13:49:00 +0000

Finally a solution!! Thanks!

By: John Griffiths

John Griffiths — Tue, 03 Aug 2010 08:52:15 +0000

mine was a bit more intense, ended up using position:static to fix it.

By: A CSS Hack for Internet Explorer 8 at From the Code Mill

A CSS Hack for Internet Explorer 8 at From the Code Mill — Sat, 12 Jun 2010 18:48:32 +0000

[...] decided to test it out on the infamous fieldset – legend IE bug.¬† The display issue came to my attention not by IE, which had been fixed using the usual [...]

By: Fentex

Fentex — Thu, 10 Jun 2010 06:28:29 +0000

The fundemental problem with fieldset legends is that they can't be rendered using CSS to style them.

The way legends appear for fieldsets requires displaying partial transparencies just not supported by any CSS standard (they have to be transparent, but not to borders).

Thus each browser manufacturer has created their own solution to how to display fieldsets with legends.

The method here generally works but fails when certain borders are specified because IE still leaks a borders width above the top border.

The way to fix that problem is to not give the fieldset a top border and use a x repeating background image in it's stead.

By: Mirko

Mirko — Wed, 02 Jun 2010 08:03:59 +0000

Thanks for the nice trick!

By: pnanh

pnanh — Thu, 06 May 2010 14:48:31 +0000

thanks yours tip

By: thetooman

thetooman — Wed, 24 Feb 2010 04:40:24 +0000

It appears the iE8 has some weird different spacing. My ugly solution was contitional commenting thusly:

fieldset legend { position: absolute; /* all ie browsers except .. */ top: -0.8em; left: 0.7em;

/* ... ie6,7 http://paulirish.com/2009/browser-specific-css-ha... */ *top: -0.5em; *left: 0.2em; }

By: Sedat Kumcu

Sedat Kumcu — Sun, 07 Feb 2010 16:13:00 +0000

Thanks for this article. Best regards man.