Web Development Blog

by Ei Sabai Nyo

19 May, 2009

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;
}
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

8 Responses to “Fieldset and Legend bug in IE8”

  1. chaelli says:

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

  2. dieMelanie says:

    Thanks a bunch. This problem was driving me nuts.

  3. Ewen says:

    This works without having to add any additional html

    legend
    {
    overflow:hidden;
    width:0;
    height:0;
    padding:0;
    font-size:0
    }

    http://www.jainaewen.com/files/html/ie-fieldset-legend.html

  4. WoBBeL says:

    @Ewen,

    With your CSS the legend text dissapears :P

  5. Ewen says:

    @WoBBeL,

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

  6. Prakhar says:

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

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

  7. Francesco says:

    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

  8. Kau-Boy says:

    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.

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories