No fieldset padding top in IE8

**Rain Lover** · 11-03-2012, 03:07 PM

Sample form:

Code:

<!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?

**drunken_dev** · 11-03-2012, 03:52 PM

This is just a suggestion.
Try it with a div and see if it still happens.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#field{padding:20px 20px 20px 20px;background-color:#ff00ee;height:150px;width:600px;border:ridge 1px #cccccc;}
</style>
</head>

<body>
<div id ="field">
<form>
 
  <legend></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>
 
</form>
</div>
</body>
</html>

**Rain Lover** · 11-03-2012, 09:35 PM

Originally Posted by drunken_dev

This is just a suggestion.
Try it with a div and see if it still happens.

It doesn't help. Besides, I don't want to remove the fieldset and legend value.

**drunken_dev** · 11-04-2012, 12:49 AM

Originally Posted by Rain Lover

It doesn't help. Besides, I don't want to remove the fieldset and legend value.

For starters your CSS may need changing.

It may or may not be the problem though I only ever write CSS shorthand with all the elements.
Or I specify "padding-top"

HTML Code:

fieldset {padding: 15px;}

HTML Code:

fieldset {padding-top: 15px;}

HTML Code:

fieldset {padding: 15px 10px 15px 10px;}

Might be worth a try.
Good practice anyway.

**bundat** · 11-04-2012, 01:31 AM

fieldset+legend padding-top is a mess in IE.
All padding-top values appear ABOVE the legend, thus pushing the entire fieldset box down (i.e. just like margin-top)

The easiest solution is to use <!--[if IE conditionals, and redefine the CSS for IE ONLY as:
fieldset {padding-top: 0}
legend {margin-bottom: 15px}

...yeah, I know, if IE conditionals are very ugly hacks, but the only way you'll get that space in the top of the box is adding it as margin-bottom to legend.

OR, you can drop the padding for fieldset altogether, then wrap the contents in a div block with its own padding/margin. Haven't tried it that way, but it should work, and it should be cleaner.

**Rain Lover** · 11-04-2012, 03:23 AM

Originally Posted by bundat

OR, you can drop the padding for fieldset altogether, then wrap the contents in a div block with its own padding/margin. Haven't tried it that way, but it should work, and it should be cleaner.

Best solution! Thanks!

Thread: No fieldset padding top in IE8

Thread Tools

Display

No fieldset padding top in IE8

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions