Ok. I've been tinkering on and off for a while now, seeing if I could fix IE's fantastically dumb rendering of legends and fieldsets without having to resort to anything too drastic and without screwing up how web browsers render it either. IE obviosly knows where the borders of the fieldset should be because it draws them where they should go, but it still shoves a whole load of the fieldsets background colour (and I'm assuming background image if specified) up outside the top edge of the fieldset.
Anyone figured out how to make IE render them as common sense would dictate?What?!?!?
You want to apply common sense to IE?
As they say here in Joisey, "Fuhget about it!"
PS: No, I don't know how to fix it.I personally haven't seen a fix for it yet....I had to scrap it on one of my old websites. Sometimes it's better to do without...and change things.annoying annoying IE....fieldsets with background really look ugly on IE...Basically, put the fieldset in your code for its semantic value, and if you want to actually style it, wrap it in a div, and use that.Yeah, that probably is your best bet. I might have to try that with some kind of future website, just to see what might happen.
Let us know how things turn out!Originally posted by Mr Herer
Ok. I've been tinkering on and off for a while now, seeing if I could fix IE's fantastically dumb rendering of legends and fieldsets without having to resort to anything too drastic and without screwing up how web browsers render it either. IE obviosly knows where the borders of the fieldset should be because it draws them where they should go, but it still shoves a whole load of the fieldsets background colour (and I'm assuming background image if specified) up outside the top edge of the fieldset.
Anyone figured out how to make IE render them as common sense would dictate?
Care to provide an example?well, in IE the background of a fieldset goes out at the top, for example look at this in IE and Moz :
<!-- m --><a class="postlink" href="http://www.lilcrazyfuzzy.de/fieldset.htmOriginally">http://www.lilcrazyfuzzy.de/fieldset.htmOriginally</a><!-- m --> posted by LiLcRaZyFuZzY
well, in IE the background of a fieldset goes out at the top, for example look at this in IE and Moz :
<!-- m --><a class="postlink" href="http://www.lilcrazyfuzzy.de/fieldset.htm">http://www.lilcrazyfuzzy.de/fieldset.htm</a><!-- m -->
The effect of the title 'set apart' is fantastically easy to create, though.
Just create your div, drop a header in it, float the header to make it shrink-wrap to its contents, and then position: relative to knock it up a few pixels.This works without any extra markup...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fieldset</title>
<style type="text/css"><!--
form{
background-color: #ccc;
border: 1px solid black;
}
fieldset{
margin-top: 1em;
padding-top: 2em;
border: none;
}
html > body fieldset {
padding-top: 1em;
}
legend{
position: absolute;
margin-top: -2.5em;
background-color: #fff;
border: 1px solid black;
}
html > body legend {
margin-top: -1.5em;
}
input{
display: block;
margin: 1em;
}
--></style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Legend</legend>
<input type="text">
<input type="text">
<input type="submit">
</fieldset>
</form>
</body>
</html>Juna's method just uses the form as the wrapper I proposed above. It's a solution for every case except where you want to actually group controls within a form -- at that point, you need the extra div.
So it's the same css. It just depends if it is the form, or if its just a subset of it.thx guys, great thing Jona!
didnt think of it!
Originally posted by mikepurvis
Jona's method just uses the form as the wrapper I proposed above. It's a solution for every case except where you want to actually group controls within a form -- at that point, you need the extra div.
So it's the same css. It just depends if it is the form, or if its just a subset of it.
If you're looking to house multiple form groups within one FORM tag, but usually they are separated by FORM tags rather than FIELDSET tags anyway. It's always best to avoid adding HTML, even if that means just a little more CSS.Splendid work!
I'll give it a try when I get back round to the front end stuff again.
Anyone figured out how to make IE render them as common sense would dictate?What?!?!?
You want to apply common sense to IE?
As they say here in Joisey, "Fuhget about it!"
PS: No, I don't know how to fix it.I personally haven't seen a fix for it yet....I had to scrap it on one of my old websites. Sometimes it's better to do without...and change things.annoying annoying IE....fieldsets with background really look ugly on IE...Basically, put the fieldset in your code for its semantic value, and if you want to actually style it, wrap it in a div, and use that.Yeah, that probably is your best bet. I might have to try that with some kind of future website, just to see what might happen.
Let us know how things turn out!Originally posted by Mr Herer
Ok. I've been tinkering on and off for a while now, seeing if I could fix IE's fantastically dumb rendering of legends and fieldsets without having to resort to anything too drastic and without screwing up how web browsers render it either. IE obviosly knows where the borders of the fieldset should be because it draws them where they should go, but it still shoves a whole load of the fieldsets background colour (and I'm assuming background image if specified) up outside the top edge of the fieldset.
Anyone figured out how to make IE render them as common sense would dictate?
Care to provide an example?well, in IE the background of a fieldset goes out at the top, for example look at this in IE and Moz :
<!-- m --><a class="postlink" href="http://www.lilcrazyfuzzy.de/fieldset.htmOriginally">http://www.lilcrazyfuzzy.de/fieldset.htmOriginally</a><!-- m --> posted by LiLcRaZyFuZzY
well, in IE the background of a fieldset goes out at the top, for example look at this in IE and Moz :
<!-- m --><a class="postlink" href="http://www.lilcrazyfuzzy.de/fieldset.htm">http://www.lilcrazyfuzzy.de/fieldset.htm</a><!-- m -->
The effect of the title 'set apart' is fantastically easy to create, though.
Just create your div, drop a header in it, float the header to make it shrink-wrap to its contents, and then position: relative to knock it up a few pixels.This works without any extra markup...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fieldset</title>
<style type="text/css"><!--
form{
background-color: #ccc;
border: 1px solid black;
}
fieldset{
margin-top: 1em;
padding-top: 2em;
border: none;
}
html > body fieldset {
padding-top: 1em;
}
legend{
position: absolute;
margin-top: -2.5em;
background-color: #fff;
border: 1px solid black;
}
html > body legend {
margin-top: -1.5em;
}
input{
display: block;
margin: 1em;
}
--></style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Legend</legend>
<input type="text">
<input type="text">
<input type="submit">
</fieldset>
</form>
</body>
</html>Juna's method just uses the form as the wrapper I proposed above. It's a solution for every case except where you want to actually group controls within a form -- at that point, you need the extra div.
So it's the same css. It just depends if it is the form, or if its just a subset of it.thx guys, great thing Jona!
didnt think of it!
Originally posted by mikepurvis Jona's method just uses the form as the wrapper I proposed above. It's a solution for every case except where you want to actually group controls within a form -- at that point, you need the extra div.
So it's the same css. It just depends if it is the form, or if its just a subset of it.
If you're looking to house multiple form groups within one FORM tag, but usually they are separated by FORM tags rather than FIELDSET tags anyway. It's always best to avoid adding HTML, even if that means just a little more CSS.Splendid work!
I'll give it a try when I get back round to the front end stuff again.