Web Development Blog

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;
}

Other similiar posts that you might be interested in:

• Store login information in cookie using jQuery
• Check username availability using AJAX and jQuery
• How to style a Submit button in CSS – Example 2
• How to style a Submit button in CSS
• Clear default text in input boxes on click with jQuery
• 10 Examples of Basic Input Validation in Javascript
• 10 Useful jQuery Snippets