No fieldset padding top in IE8

This site is best viewed in a modern browser with JavaScript enabled.

Rain_Lover

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?

drunken_dev

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

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

drunken_dev;1232483 wrote:
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

Rain Lover;1232535 wrote:
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"

fieldset {padding: 15px;}

fieldset {padding-top: 15px;}

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

Might be worth a try.
Good practice anyway.

bundat

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

bundat;1232547 wrote:
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!