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.


<form action="login.php" method="post" id="login"> 
    <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 {
	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:


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.

    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 {

    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.