Fieldsets, legends, rounded corners, and IE

HTML & CSS
1

What’s the best approach to get fieldsets and legends and rounded corners working properly in IE without extra HTML markup?

In IE9, the fieldset border runs through the legend (because of positioning). However, without positioning, the fieldset doesn’t get rounded corners.

Since IE10 doesn’t recognize conditionals, the “fix” in the IE conditional doesn’t get applied.

I’m not too concerned about IE6-8 at this point.

What’s the best approach these days to handling this problem?

<html>
<head>
<style type="text/css">
p {
    margin:.2em 0 .4em 0;
}
div {
    width:50%;
    padding-top: 20px;
    margin-left:auto;
    margin-right:auto;
}

fieldset {
    background:yellow;
    border:2px solid blue;
    border-radius:5px;
    
}
legend {
    font-weight:bold;
}
</style>

<!--[if IE]>
<style type="text/css">
fieldset {
    position:relative;
    padding-top:1em;
}
legend {
    position:absolute;
    top:1.1em;
    /*background:yellow;*/
}
</style>
<![endif]-->


</head>
<body>
    <div>
        <fieldset>
            <legend>Tester</legend>
            <p>some stuff here</p>
        </fieldset>
    </div>
</body>
</html>
2

Hi,

For consistency you are better using a wrap instead of the fieldset as shown in Francky’s example above but you can do it with the fieldset like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
fieldset {
	width:50%;
	margin:2em auto;
	background:yellow;
	border:2px solid blue;
	border-radius:5px;
	padding:20px;
	position:relative;
}
legend {
	font-weight:bold;
	position:absolute;
	left:10px;
	top:-1.1em;
	height:2em;
	line-height:2em;
	padding:0 10px;
}
legend:after {
	position:absolute;
	content:" ";
	height:3px;
	left:0;
	right:0;
	top:50%;
	background:#fff;
}
legend b {
	position:relative;
	z-index:2;
}
</style>
</head>

<body>
<form class="mainform" name="form1" id="form1" method="post" action="">
		<fieldset>
				<legend><b>Testing</b></legend>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</fieldset>
</form>
</body>
</html>

The difference is that you can have the text above the coloured background but not covering it as in Francky’s good examples.

It should work back to IE6 (without round corners) but Opera doesn;t support :after on the legend element so for opera support you’d need to nest another span and use that instead.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
fieldset {
	width:50%;
	margin:2em auto;
	background:yellow;
	border:2px solid blue;
	border-radius:5px;
	padding:20px;
	position:relative;
}
legend {
	font-weight:bold;
	position:absolute;
	left:10px;
	top:-1.1em;
	height:2em;
	line-height:2em;
	padding:0 10px;
}
legend:after, legend span:after {
	position:absolute;
	content:" ";
	height:3px;
	left:0;
	right:0;
	top:49%;
	background:#fff;
}
legend b {
	position:relative;
	z-index:2;
}
</style>
</head>

<body>
<form class="mainform" name="form1" id="form1" method="post" action="">
		<fieldset>
				<legend><span><b>Testing</b></span></legend>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</fieldset>
</form>
</body>
</html>
3

Sure, from the consistency point of view (in terms of according to the default behavior of legends), the background should be half/half instead of covering the background of the box.
On the other hand:

  • It seems the method is not 100% waterproof for (rather extreme) font scaling. See this [U]fieldset-paul-2a.htm[/U] with a 200% font-size:

    [CENTER]
    Firefox 22 at 200% font-size[/CENTER]
    It’s giving [U]these browsershots results[/U] for some other browsers.

  • Personally, I don’t prefer the half/half background: that’s a question of flavor of course. I see the legend more as a kind of heading which deserves to be an easy distinguishable element (also for the usability/readability/accessibility).
    For example, without much effort & without extra markup you can give the legend an own rounded corner border like this: [U]fieldsets-legends-rounded-corners-and-IE-nw2.htm[/U].
    [U]Browsershots for IE[/U]: IE10 compatible.
    [CENTER][/CENTER]
4

Yes which is why I said for consistency using a wrap for the border was better instead as in your example.:slight_smile: However, zoom (or text-resize) is never going to get perfect results as browsers have to round up or down the differences so you will find normal elements being misplaced at extreme scaling anyway. (IE for example rounds background images and when using sprites it shows the edge of any adjacent sprites when they are not separated by more than a couple of pixels). It’s not an exact science and there are always compromises.

Yes using a solid background to the legend will hide the rounding differences more easily than my other example as it won’t matter if its a pixel or two out. It all depends on the design I suppose. I did loads of these demos about 10 years ago and there was a good article here by John which sheds some insight but is a pretty old article now.

It’s annoying that still many years later we still have to jump through these hoops to style something that should be so simple.

5

If I change to top:49% instead of top:50%, it looks like the thin line doesn’t appear while zooming.

I’ll likely use Paul’s first solution, as I prefer the standard fieldset/legend visual style instead of enclosing the legend in a box with a background.

Thanks guys :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
fieldset {
    width:50%;
    margin:2em auto;
    background:yellow;
    border:2px solid blue;
    border-radius:5px;
    padding:20px;
    position:relative;
}
legend {
    font-weight:bold;
    position:absolute;
    left:10px;
    top:-1.1em;
    height:2em;
    line-height:2em;
    padding:0 10px;
}
legend:after {
    position:absolute;
    content:" ";
    height:3px;
    left:0;
    right:0;
    top:49%;
    background:#fff;
}
legend b {
    position:relative;
    z-index:2;
}
</style>
</head>

<body>
<form class="mainform" name="form1" id="form1" method="post" action="">
        <fieldset>
                <legend><b>Testing</b></legend>
                <p>test</p>
                <p>test</p>
                <p>test</p>
        </fieldset>
</form>
</body>
</html>