IE Fieldset Bleed Bug

One difference between Internet Explorer and other browsers when it comes to forms is in connection with the legend that can be displayed in the top border of a fieldset. While the different browser allow the legend to extend different distances out of the top of the fieldset (which doesn't really matter since your visitors will only see its position in the one browser they use), IE unfortunately extends the background colour from the fieldset far enough out of the top of the fieldset so that the entire legend has that background colour behind it. This is noticeable and rather ugly looking so we need to fix it.

After experimenting with this for a while I believe that I have come up with the best solution. It will require a span tag around the text inside the legend as we need a way to move the text independently of the legend.

<form action=""><legend><span>Bleed Test</span></legend>
rest of form goes here


With the span tag added around our legend text we are now ready to style it. To start with the first thing you need to do is to apply the styling that you want it to have in modern browsers. Let's assume that we have applied a different colour to the background of the fieldset to the background of the surrounding content as that is the only time where this problem is actually visible.

Since the problem only occurs in IE7 and earlier we will want to add an additional stylesheet to the page after our regular stylesheet that specifically targets that browser.

<link rel="stylesheet" href="main.css" type="text/css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />

All that remains is to add the styles into the ie7.css file that will fix this problem for us. After a lot of experimenting I have found that the following settings will correct the error while still allowing the text size of the content to be rescaled (at least between 50% and 500% which was as far as I decided was worth going during my test).

fieldset {padding-top:.6em;}
legend {margin-top:0;height:0;}
legend span {position:relative;top:-1.1em;height:1.1em;}


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow