Positioning <legend>
Text
This article builds on removing <fieldset>
borders. In Firefox 2, Opera 9.2 and IE8b1 that technique will place the <legend>
element against the left edge of the <fieldset>
. But in IE7 and earlier it will remain offset.
Adjust the Layout for Internet Explorer Only
Conditional Comments let you target a workaround at the affected versions of IE. In the <head>
of your web page, you’ll need something like this:
<link rel="stylesheet" type="text/css" media="screen" href="/style.css">
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/ie.css"><![endif]-->
Every browser with CSS support gets style.css
. It includes the normal styles and hides the border of the <fieldset>
. IE7 and earlier get ie.css
, which contains this:
/* Positioning Fix for IE6 & IE7 */
legend {
left: -7px;
position: relative;
}
Result
The combination of these techniques makes the layout match in:
- Firefox 2
- Opera 9.2
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8 Beta 1
Recommendation
- Group form controls with
<fieldset>
. - Label each group with
<legend>
. - Style these elements as required with CSS.
- Adjust for versions of IE when necessary using Conditional Comments.