Common Browser Bugs / Issues

Contact Us or call 1-877-932-8228
Common Browser Bugs / Issues

Common Browser Bugs / Issues

Positioning Legends

In the Styling Forms with CSS lesson, we pointed out that the positioning of legends gets messed up in Internet Explorer. For example, take a look at the simplified form below:

Code Sample:

BrowserBugs/Demos/legend.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
fieldset {
	border:0;
	background-color:#cee;
	padding:10px;
}
legend {
	font-weight:bold;
	font-size:1.2em;
}
</style>
<title>Password Reminder</title>
</head>
<body>
<form method="post" action="action.php">
	<fieldset>
		<legend>Password Reminder</legend>
		<label for="Email">Email:</label>
		<input type="text" size="20" name="Email" id="Email" title="Email">
	</fieldset>
	<fieldset id="buttons">
		<input type="submit" id="Submit" name="Submit" value="Login">
	</fieldset>
</form>
</body>
</html>

Code Explanation

The result is shown below in Firefox: Firefox Result

Safari shows a similar result: Safari Result

But Internet Explorer moves the legend down: Internet Explorer Result with Legend Moved Down

The solution to this problem is different depending on the version of Internet Explorer. For Internet Explorer versions earlier than 10, this can be fixed using relative positioning, with this code:

legend {
	position: relative;
	top:-1.1em;
}

But if we put that into the general rule for legend, it will mess up other browsers, so we need to use an Internet Explorer conditional comment:

<!--[if IE]>
<style type="text/css">
legend {
	position: relative;
	top:-1.1em;
}
</style>
<![endif]-->

The result: Result

That should make the legend look the same in earlier versions of IE.

Later versions (from 10 on) of Internet Explorer won't see the conditional IE tags; for those browsers, we use the IE-specific media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	legend {
		margin-top:-0.6em;
	}
}

Check out BrowserBugs/Demos/legend.html to see the finished file.

As code is always changing, we see now that CSS is evolving. As of this writing, CSS3 is becoming useful in ways we never thought possible. To learn some of the new features and their browser compatibility, visit http://www.caniuse.com