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
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.
Great tip! Thanks a lot!
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
asdfsdaf
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.
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
{
}
This doesn't seem to work correctly in the current IE7 Beta.
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.
Thanks, Gordon, for pointing that out. I have not had much time to play with IE7. Should probably get on that.
"Viola!"
Personally, I prefer the violin. :)
Oh dear.
So, my ignorance is showing. Isn't it "víola", a french word pronounced "Walla!"?
Or am I way off.
voila – you have the i & o transposed.
HA… ya that. oops.
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.
Opera seems to put the inside the when doing this…
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!!!
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] }"
fieldset the same in FireFox IE7 Opera
This code is use in PHP but you can do the same in javascript :p
<code>
fieldset {
}
legend {
}
</code>
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 {
}
legend {
}
</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 {
}
legend {
(?php if( !eregi( 'opera', $_SERVER[ 'HTTP_USER_AGENT' ])) echo 'position: relative;'; ?)
}
</code>
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).
… still doesn't work in IE7
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.
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 {
}
Awsome.. It worked perfectly.
Thank you very much!
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.
The above problem occurs only in IE 7 Final.
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?
Ups the form didn't let me put the complete code…
fieldset { position:relative }
legend {
position:relative;
top:-0.7em; margin-bottom:-0.7em;
}
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.
thanks for this! it worked perfectly!
Thanks for the fix, came straight from google and was happy to find simple well formed code with clear instructions. Perfect!
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
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.
Thanks to all! I was pulling my hair out to get this to work.
thanks for this is quite the frustrating problem!!!
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.
Thanks! :) This worked great!
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…
Nice tutorial. Fixed a stupid issue for me! Thanks
Thanks. Fixed a big problem for me.
thank you.
A w e s o m e !
THANK YOU FOR THIS!!
Thanks, useful guide. it's easy and simple. I'll try your solutions right now… :)
tysir!
Thanks Matt…i have to say Voila! too :)
asdfsdaf
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
Thanks Matt for this useful tip. Really helped.
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
So very useful! thanks!
ä¸é”™ä¸é”™Getting Fieldset Backgrounds and Legends to Behav…
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
Damn! I was having yhe very same problem! Good I quickly found this page. Thank you!
IE sucks, and it ever will.
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
gfhfghg
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
Thanks for this article. Best regards man.
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;
}
thanks yours tip
Thanks for the nice trick!
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.
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)
mine was a bit more intense, ended up using position:static to fix it.
Finally a solution!! Thanks!
Wonderful ! TKS a lot!