Positioning <legend> Text

First published on 2008-02-05, updated on 2008-03-12.

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:

Recommendation