Sample form:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 50px;}
</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>
It works in all major browsers, but there’s no padding top in IE8. Any cross-browser solution?
This seems to a bug in older versions of IE, possibly caused by some confusion around the
legendelement (which is nested insidefieldsetbut rendered in a special way), so that the padding gets misplaced above the form. I can more or less reproduce the issue on IE 9 in Quirks Mode and in IE 8 and IE 7 emulation mode.As a workaround, do not set top padding on the
fieldsetelement. Instead, set a top margin on the first normal element inside it (not counting thelegendelement).