No fieldset padding top in IE8

HTML & CSS
1

Sample form:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 15px;}
</style>
</head>
<body>
<form>
 <fieldset>
  <legend>Form</legend>
  <p>
  <label for="name">Name </label><input id="name" type="text">
  </p>
  <p>
  <label for="email">Email </label><input id="email" type="text">
  </p>
 </fieldset>
</form>
</body>
</html>

There’s no padding top in IE8. Any cross-browser solution?

2

Without changing the HTML markup and introducing a new element, you could do it like this:

fieldset {
	padding: 15px;
 	position: relative;
 	display: table;
}


legend {
	display: block;
	position: absolute;
	top: -10px;
	left: 20px;
	background: #fff;
}
3

Thanks! That’s not a bad workaround. And how do you achieve it with changing the HTML markup and introducing a new element?

4

Hi Rain Lover,

you could add a div inside your form and then apply different styling to that instead, but I actually think that in this case, keeping the markup lean is the better alternative. :slight_smile: