CSS, Snippets, Troubleshooting, xHTML

Fieldset and Legend bug in IE8

Problem in IE8:

The upper half of the <fieldset> border goes missing. This problem has been discussed here and shown here.

HTML:

<form action="login.php" method="post" id="login"> 
  <fieldset>		
    <legend>Login</legend>
    <label for="username" class="label">Username</label>
    <input type="text" name="username" id="username"/>
    <label for="password" class="label">Password</label>
    <input type="password" name="password" id="password" />
    <input type="submit" name="submit" value="Login" />
  </fieldset>
</form>

CSS:

fieldset {
	border: 1px solid #333;
}

legend {
	display: none;
}

The workaround:

It looks like the problem occurs only when you set the <legend> to display: none in CSS. To solve this, we will need to add a span element inside the legend and set it to display: none and remove display: none from legend.

Updated HTML:

    <legend><span>Login<span></legend>

Updated CSS:

legend {
}

legend span {
	display: none;
}

8 thoughts on “Fieldset and Legend bug in IE8

  1. Thanks, I had the same problem on my website. Now it works. (:

  2. @Ewen,

    With your CSS the legend text dissapears :P

  3. @WoBBeL,

    It’s supposed to…
    The CSS is meant to simulate display:hidden in order to avoid the fieldset border bug.

  4. Hi this is the proper workaround and this wont make the legend disappear.

    fieldset
    {
    margin: 0.8em 0px;
    padding: 1em;
    }

  5. My issue was that the fieldset wasn’t having the whole border rendered untill I removed display:none; from the legend, leaving us with this code:

    body.ie8 #content #frmLogin fieldset legend {
    display:block;
    height:0;
    visibility:hidden;
    width:0;
    }

    With that, the fieldset is rendered OK

  6. Thank you a LOT! I couldn’t find why IE was doing it, no I know it! I solved it by replacing “display: none” with “visibility: hidden; height: 0” for the legend.

Comments are closed.

Twitter
LinkedIn
YouTube
Instagram