Getting Fieldset Backgrounds and Legends to Behave in IE
I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking for. Jeff Croft has a close answer, but he is trying to solve a different problem. I built off of his exploration for this solution.
The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color like so:
HTML
<
fieldset>
<input ... />
<input ... />
CSS
fieldset{
background: #ccc;
}
Proper rendering (in every browser but IE is close to this: (this specific screenshot is from Firefox)
IE does something a little different: it causes the background color to be applied to the legend as well, mysteriously causing the background color to “spill” out of the fieldset.
The solution is to dissociate the legend tag from the normal flow of the document. That is, absolutely position it. Here’s how: (Since IE is the only browser that needs help with this, we are going to use the Holly Hack, so it only applies to IE)
- Give the fieldset a
position: relative;to make sure we are positioning the legend tag relative to the fieldset.
* html fieldset{
position: relative;
}
- Give the legend a
position: absolute;to break it out of the normal flow of the fieldset. This will position the top left corner of the legend with the top left corner of the fieldset, so we need to bump it up half a character and to the right half a character. Like so:
* html legend{
position:absolute;
top: -.5em;
left: .5em;
}
- Now we’re almost there. By way of a little cleanup, we are going to apply some top padding to the fieldset and a top margin to the fieldset in order to make space for the label tag which is just floating on top of everything.
* html fieldset{
position: relative;
margin-top:1em;
padding-top:.75em;
}
- Voila! You have a form with a fieldset and a legend that looks nearly identical in all browsers.
Promotion:
In insurance business, people learn to rely on their debit cards, that prevents the shock of an unwanted credit report and ensures the security of existing real estate.
April 10th, 2006 at 11:12 am
Hey Matt,
Thanks! I have had that problem with a few projects, but didn't know how to solve it so invariably I would have to scrap using a background colour. Now at least I know how to get it to work right.
April 12th, 2006 at 10:41 am
Great tip! Thanks a lot!
April 13th, 2006 at 5:27 pm
[...] Matt Heerema : Web Design » Getting Fieldset Backgrounds and Legends to Behave in IE (tags: css design html fieldset) [...]
April 14th, 2006 at 4:39 pm
[...] Matt Heerema has some useful tips for the “problem” that occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color which ends up spilling outside of the fieldset. What to know how to fix it for IE? Head over and see what to do. [...]
April 19th, 2006 at 3:56 am
Hi, thanks for the great fix!!! I was wondering if you could give some additional advice. I'm nesting Fieldset and Legend and when I do so the Fieldset text overlaps when I implement this fix unless I do a line break in the XHTML. It's probably a simple margin fix, but I can't seem to figure it out. I don't want to use the because it creates too much room in FIrefox/Mozilla, etc.
I've published a couple screens to show you what I'm running into. http://www.wvdhhr.org/bcf/temp_ieBugonFieldset.ht...
Thanks again for the tip and for any advice you may give.
May 1st, 2006 at 12:35 pm
[...] The main problem with events like CSS Reboot, et al, are that they serve as sort of a Total Perspective Vortex for me. It reminds me how far I have to go, and how much I have to learn. What keeps me from giving up is that I feel I have something to contribute to the noise. I just have to find my niche (solutions to strange CSS problems perhaps?) and write about it, constantly. [...]
May 2nd, 2006 at 6:58 pm
Another fix for this problem is to have a background image for the fieldset, 1 pixel wide and much taller than the fieldset will be. Does mean you have to change the image to change the colour though…
Something along the lines of:
html fieldset {
background: url(/img/backgrounds/fieldset.gif) repeat-x top;
}
fieldset
{
margin-bottom: 2em;
border: #000066 solid 1px;
padding: 1em;
padding-top: 0.4em;
}
May 20th, 2006 at 9:43 am
This doesn't seem to work correctly in the current IE7 Beta.
June 25th, 2006 at 10:08 pm
Actually the method does work in IE7. The Holly Hack however doesn't. The method works fine if you put the above in a seperate stylesheet and load it with a conditional comment.
June 25th, 2006 at 11:04 pm
Thanks, Gordon, for pointing that out. I have not had much time to play with IE7. Should probably get on that.
June 29th, 2006 at 2:02 am
"Viola!"
Personally, I prefer the violin. :)
June 29th, 2006 at 4:19 am
Oh dear.
So, my ignorance is showing. Isn't it "víola", a french word pronounced "Walla!"?
Or am I way off.
July 7th, 2006 at 4:22 pm
[...] Getting Fieldset Backgrounds and Legends to Behave in IE – Matt Heerema : Web Design (tags: css xhtml webdesign fieldset ie hack) [...]
July 14th, 2006 at 5:14 am
voila – you have the i & o transposed.
July 14th, 2006 at 5:15 am
HA… ya that. oops.
August 14th, 2006 at 4:13 am
OK. Solution is great but I have to insert 3 fieldsets one under one and now I have big trouble how to apply more or less the same margin between fieldsets in IE and Firefox.
Ane ideas?
Thanks.
August 19th, 2006 at 5:28 am
Opera seems to put the inside the when doing this…
September 10th, 2006 at 12:41 pm
[...] I was working on some CSS for a form and realized that applying a background to the fieldset didn’t really have the desired effect. The background flows out at the top of the fieldset in IE (what a surprise!). Luckily, I found a solution to the problem on Matt Heerema’s blog. Works like a charm! [...]
October 12th, 2006 at 6:23 am
I think that this answers my prayers – but, after playing around, I think it is missing something!!
What I want/need is a box around the 'tab heading'. And for the whole of this new box to have a coloured background (like the 'main' box.
Anyone know the cure?
Please!!!
October 13th, 2006 at 8:12 am
[...] As most of you know, I have some kind of shoulder problem. I started seeing a physio November last year about it and have been having treatment since. A few weeks ago I hurt it at Kung Fu, and have been going easy since. Little did I know I had re-wrecked it. Its again out of commission for a month, so no swinging punches. Which is basically what Choy Lay Fut is all about. So ill have to think of something. Lucky for me, Bando has the thumbs up, due to its striking being very tight quick movements. So today, we did sparring. And I seem to be having trouble walking. Now its not every day I get hammered…. actually… I seem to get hurt a lot now I think about it… Hmmm… where was i going with this again…. oh yeah, I tend to not bruise very easily at all. If I do usually get them, they aer usually a few days later and kind of light. However… I got home no more than 3 hours ago and my shins are already getting darker. Good times. I seem to have a slight one appearing on my upper thigh after getting knocked on my ass by Mr Kroll. My only rehab at the moment is after any training, I have to ice the shoulder for ~10 mins. And it gets cold…. DAMN cold…. Anyway, on a less violent note, im starting to prepare for IE7. Not really getting excited, more reading up on how I will have to have the bastard to display CSS properly.. I have been doing a few more Accessible forms as of late and had just found a fix for fieldset background spillage in IE. From what I have read so far in preliminary preports and whatnot all hacks should work, and CSS should render better than before. Of course, this poses a problem. Do we change doing CSS to incorporate the fixes in this version, or would you still allow for IE6 users, making any updates completely irrelevant? Hmmm… I shalll ponder the conundrum over a bottle of water… Also, the Jets are on tomorrow at the Inglewood. Im quite tempted to go… Actually, im quite sure I will. [...]
October 18th, 2006 at 7:10 pm
Thanks, I've been looking for something like this for years!
One thing, I noticed the background still sticks out the top a bit. You can fix that by doing "legend { margin-top: -[width of fieldset border] }"
October 25th, 2006 at 6:40 am
fieldset the same in FireFox IE7 Opera
This code is use in PHP but you can do the same in javascript :p
<code>
fieldset {
margin: none;
padding: 0px 10px 10px;
background: #eee;
-moz-border-radius: 10px;
}
legend {
margin-left: 10px;
padding: 0px 10px;
background: #9cf;
font-weight : bold;
}
</code>
October 25th, 2006 at 6:42 am
the website clean my php code …
fieldset the same in FireFox IE7 Opera
This code is use in PHP but you can do the same in javascript :p
<code>
fieldset {
margin: none;
padding: 0px 10px 10px;
background: #eee;
-moz-border-radius: 10px;
}
legend {
margin-left: 10px;
padding: 0px 10px;
background: #9cf;
font-weight : bold;
}
</code>
October 25th, 2006 at 6:43 am
fieldset the same in FireFox IE7 Opera
This code is use in PHP but you can do the same in javascript :p
<code>
fieldset {
margin: none;
padding: 0px 10px 10px;
background: #eee;
-moz-border-radius: 10px;
}
legend {
(?php if( !eregi( 'opera', $_SERVER[ 'HTTP_USER_AGENT' ])) echo 'position: relative;'; ?)
margin-left: 10px;
padding: 0px 10px;
background: #9cf;
font-weight : bold;
}
</code>
October 31st, 2006 at 3:30 pm
[...] Getting Fieldset Backgrounds and Legends to Behave in IE – Matt Heerema : Web Design (tags: css webdesign) [...]
November 27th, 2006 at 5:52 am
For the person asking about multiple fields. I ran into the same trouble. Messing with the margins wasn't getting me anywhere. I noticed someone said a br tag worked, but created too much space in FF/Opera. Well, if you use conditional comments it works beautifully.
Hopefully this comes through correctly (remove the spaces).
November 27th, 2006 at 6:18 pm
… still doesn't work in IE7
November 27th, 2006 at 7:48 pm
I got it to work in IE7 by adding a margin-top:-5px; on the legend.
My stylesheet now looks like this.
fieldset {
position: relative;
border: 1px solid #fff;
padding: 0px 10px 10px;
background: url(../images/semi.png);
width:870px;
margin: 20px auto;
}
legend{
margin-top:-5px;
top: -0.5em;
margin-left: 10px;
padding: 0px 10px;
background: #000;
font-weight : bold;
border: 1px solid #fff;
-moz-border-radius: 10px;
}
Works like a charm in FF and IE7.
December 27th, 2006 at 12:44 am
this method seems to work in ff2 and ie7, although problems do occur if the user resizes the window.
form fieldset legend {
background-color: #820027;
padding: 8px;
color:#FFFFFF;
position: relative;
top: -20px;
display: block;
margin-left: 0px;
margin-right: -8px;
margin-top: 5px;
}
form fieldset {
background-color: #EFECE2;
}
January 6th, 2007 at 9:01 am
[...] mattheerema.com – Yet another interesting Blog entry I stumbled onto when researching HTML I think. This entry covers some interesting issues and behaviors of using the legend command in html on Internet Explorer. [...]
January 6th, 2007 at 4:55 pm
[...] Zitat von Despairing 2. In meinem Gstebuch wird im Internet Explorer-Browser jedes Fieldset fehlerhaft dargestellt. Die Hintergrundfarbe des Fieldsets wird ein paar Pixel ber der Fieldsetbox dargestellt, was nicht so sein sollte. Wie kann ich das unterbinden? Hatte ich letzhin gerade auch. Lsung siehe Getting Fieldset Backgrounds and Legends to Behave in IE – Matt Heerema : Web Design __________________ The only thing to do with good advice is pass it on. It is never any use to oneself. – Oscar Wilde – #me { position: absolute; } [...]
January 19th, 2007 at 5:31 am
Awsome.. It worked perfectly.
Thank you very much!
January 23rd, 2007 at 10:08 am
I got it to work in both IE 6 and 7. Problem remains, that IE shows the legend text in blue color, even though I have
legend {
color: #666;
}
in my css.
Any ideas?
P.S.:
fieldset {
color: #666;
}
and
body {
color: #666;
}
are also set.
January 23rd, 2007 at 7:50 pm
The above problem occurs only in IE 7 Final.
February 10th, 2007 at 5:56 am
Thanks for a brilliant solution. Me too found that this method applied "as it is" doesn't bring the desired result in IE7. However there seem to be another way around the problem – to put the above css rules (by Matt Heerema)into an IE condition comment.
<!–[if IE]>–>
fieldset { position:relative }
legend {
position:relative;
top:-0.7em; margin-bottom:-0.7em;
}
Usually I have such CSS pocket to store all the IE specific hacks in one place. Why not to drop there the discussed rules?
February 10th, 2007 at 5:59 am
Ups the form didn't let me put the complete code…
fieldset { position:relative }
legend {
position:relative;
top:-0.7em; margin-bottom:-0.7em;
}
February 10th, 2007 at 6:31 am
My sorry to a moderator, just want to share a bit of wisdom. Please fit it somehow into the comments if think it is useful.
The rules can be placed inside if IE condition statement.
February 13th, 2007 at 3:26 am
thanks for this! it worked perfectly!
March 8th, 2007 at 2:42 am
Thanks for the fix, came straight from google and was happy to find simple well formed code with clear instructions. Perfect!
May 6th, 2007 at 9:25 am
Buahs
thank u very much for this post, i'm trying aaaaall the css things to change the color legend in IE,
f….. IE!!! i hate it!
greetingss
May 16th, 2007 at 12:46 am
Found one problem with this method. In Safari, it draws the border all the way around the fieldset. Legend text is placed above the border, but still a bit of a problem.
May 16th, 2007 at 12:37 pm
Thanks to all! I was pulling my hair out to get this to work.
May 20th, 2007 at 6:24 am
thanks for this is quite the frustrating problem!!!
May 30th, 2007 at 5:38 am
[...] Test auch wirklich sehr gut funktioniert. Ich muss es nur noch auf mein Beispiel anwenden. Im Blog von Matt Heerema lsst sich dieses finden. Gru soyo __________________ Aktuelle Zertifizierung: MCP 70-270 In [...]
June 8th, 2007 at 7:47 am
This is an awesome hack but as ever, IE manages to mess it up however hard you try: I have a fieldset with a semi-transparent PNG background. so:
<code>.my_fieldset {
background:transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/bg/1px_gray_20pc.png');
}</code>
With this kind of CSS PNG background, IE decides to crop the legend at the top of the fieldset. If you change the background to a normal background:#f00; type declaration, the legend displays as normal.
June 10th, 2007 at 7:08 am
Getting Fieldset Backgrounds and Legends to Behave in IE…
[...]The title says it all. Very useful![...]…
August 8th, 2007 at 12:54 am
Thanks! :) This worked great!
September 27th, 2007 at 5:36 am
Regarding the comment by Giles, this problem also occurs when using a transparent PNG sans the MS filter hack. So, even if you support IE 7 only, you are screwed by IE once again.
That said, I cannot get any of the posted methods to work in IE 6 or 7. I still get a few pixels of bleed out the top. I stripped the styles down to nothing first to be sure the css applied to real browsers in my first style sheet were not causing issue. I'm glad others have had success, but I can no longer waste time on IE and have decided to display it plain and ugly. Sad, because that's what most users of my app use( corporate customers ). They'll never see the great design I had…
November 14th, 2007 at 5:17 pm
Nice tutorial. Fixed a stupid issue for me! Thanks
December 28th, 2007 at 5:41 am
Thanks. Fixed a big problem for me.
February 10th, 2008 at 7:22 pm
thank you.
May 13th, 2008 at 5:08 pm
A w e s o m e !
July 22nd, 2008 at 8:06 am
THANK YOU FOR THIS!!
August 3rd, 2008 at 7:08 am
[...] Getting Fieldset Backgrounds and Legends to Behave in IE I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking [...]
August 6th, 2008 at 1:11 am
Thanks, useful guide. it's easy and simple. I'll try your solutions right now… :)
August 14th, 2008 at 7:42 am
[...] Getting Fieldset Backgrounds and Legends to Behave in IE I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking [...]
September 17th, 2008 at 12:44 am
[...] mattheerema adresinde gördüğüm faydalı bir makale ekliyorum. Sayfalarınızda Fieldset ve Legend takılarını kullanırken eğer fieldset takısına zemin rengi atarsanız IE tarayıcılarda legend takısına bu zemin renginin taşdığını görüyoruz. Aşağıdaki küçük CSS eklemeleri ile bu sorundan kurtulabiliyoruz. [...]
December 18th, 2008 at 7:24 am
tysir!
January 26th, 2009 at 12:18 pm
Thanks Matt…i have to say Voila! too :)
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:33 am
asdfsdaf
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
February 12th, 2009 at 9:35 am
Wow this is a two year old bug and I was still searching for it – thanks for finding a solution two years ago ;-) Léonie.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 10th, 2009 at 3:04 am
Thanks Matt for this useful tip. Really helped.
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
March 17th, 2009 at 2:43 am
So very useful! thanks!
April 3rd, 2009 at 1:06 am
不错不错Getting Fieldset Backgrounds and Legends to Behav…
April 17th, 2009 at 6:17 pm
[...] Getting Fieldset Backgrounds and Legends to Behave in IE – Matt Heerem [...]
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 5th, 2009 at 12:58 am
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
June 25th, 2009 at 7:45 am
gfhfghg
December 11th, 2009 at 9:21 am
Have to agree, IE always causes pain at the wrong times!!! It’s better than it used to be though to be fair!
Cheers, John
January 8th, 2010 at 12:28 pm
[...] For IE7, the background color doesn’t appear at all, which might actually be better than to have it appear incorrectly. So the appearance definitely won’t be as sharp for your IE users as for any other browser user. (Yet another reason to encourage your clients, friends, associates, neighbors and strangers on the street to avoid Internet Explorer. We can eliminate it in our lifetimes.) (UPDATE: there are, of course, work-arounds. Here are a few suggestions from Sitepoint and CommunityMX and Matt Heerema.) [...]
February 7th, 2010 at 9:13 am
Thanks for this article. Best regards man.
February 23rd, 2010 at 9:40 pm
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; }
May 6th, 2010 at 7:48 am
thanks yours tip
June 2nd, 2010 at 1:03 am
Thanks for the nice trick!
June 9th, 2010 at 11:28 pm
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.
June 12th, 2010 at 11:48 am
[...] 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 [...]
August 3rd, 2010 at 1:52 am
mine was a bit more intense, ended up using position:static to fix it.
August 13th, 2010 at 6:49 am
Finally a solution!! Thanks!
August 18th, 2010 at 3:37 am
Wonderful ! TKS a lot!