title: Very Unusual Margin Appears Always in Internet Explorer [CSS]
body: <p>Only in Internet Explorer does this occur: I'm getting an additional margin (of 19 pixels) below a fieldset and I can't seem to see why, whatever I try! Try it for yourself, take a look at <a href="http://theshrop.com/d/call_us_or_call_in.php" rel="nofollow noreferrer">http://theshrop.com/d/call_us_or_call_in.php</a>. To aid I've added a grid and some background colours. The fieldset should have a 1.125em bottom margin and it does in Safari, Firefox etc. It has an extra 19 pixels in Internet Explorer? I've given the fieldset a width and height so it hasLayout, hope this helps.</p>
  
  <pre><code>body{
  color:#171717;
  font:1em/1.125em Georgia,serif;
  margin:0;
  padding:0;
  }
  /*   */
  fieldset{
  background:fuchsia;
  border:0 solid green;
  border-width:0.0625em 0;
  height:19.125em;
  margin:0 0 1.125em;
  padding:3.3125em 1.125em 1.0625em;
  position:relative;
  width:31.5em;
  }
  /*   */
  form dl{
  margin:0;
  }
  form dl dd{
  /*       */
  height:2.25em;
  margin:0 0 1.125em;
  position:relative;
  /*       */
  }
  form dl dt{
  margin:0 0 1.125em;
  }
  /*   */
  form dl dt+dd+dt+dd{
  height:7.875em;
  } 
  /*   */
  form dl+div{
  line-height:2.25em;
  /*       */
  margin:0;
  padding:0;
  /*       */
  }
  h3{
  color:#701;
  font:bold 1em/1.125em Helvetica,Arial,serif;
  margin:0 0 1.125em;
  text-transform:uppercase;
  }
  input[type=text]{
  border:0.0625em solid #171717;
  font:1em/1.125em Georgia,serif;
  height:1.125em;
  margin:0;
  padding:0.5em 1.0625em;
  /*       */
  position:absolute;
  top:0;
  /*       */
  }
  /*   */
  legend{
  background:aqua;
  margin:1.0625em 0 1.125em;
  padding:0;
  position:absolute;
  top:0;
  }
  /*   */
  p{
  background:lime;
  margin:0 0 1.125em;
  }
  textarea{
  border:0.0625em solid #171717;
  font:1em/1.125em Georgia,serif;
  height:6.75em;
  margin:0;
  padding:0.5em 1.0625em;
  /*       */
  position:absolute;
  top:0;
  /*       */
  }
  .Address{
  margin:0 0 1.125em;
  }
  .Address dd{
  margin:0;
  }
  .Address dt{
  display:none;
  }
  .Address dt+dd+dt+dd{
  display:inline;
  }
  .Address dt+dd+dt+dd+dt+dd+dt+dd{
  display:block;
  text-transform:uppercase;
  }
  .Bad{
  background:#dbb;
  color:#901;
  }
  .Calendar{
  list-style:none;
  margin:0;
  padding:0;
  }
  .Calendar dd{
  background:#701;
  font:bold 0.5625em/2em Helvetica,Arial,serif;
  margin:0;
  text-align:center;
  text-transform:uppercase;
  }
  .Calendar dl{
  border:0 solid #111;
  border-width:0.0625em 0.125em 0.125em 0.0625em;
  float:left;
  margin:-0.0625em 1em 1em 1.0625em;
  width:3.375em;
  }
  .Calendar dt{
  display:none;
  }
  .Calendar dt+dd+dt+dd{
  background:#fff;
  color:#171717;
  font:1em/2.25em Georgia,serif;
  margin:0;
  }
  .Calendar h4{
  float:right;
  font:1em/1.125em Georgia,serif;
  margin:0 0 1.125em;
  width:10.125em;
  }
  .Calendar li{
  clear:both;
  }
  .Calendar p{
  float:right;
  font:1em/1.125em Georgia,serif;
  width:10.125em;
  }
  .Good{
  background:#bdb;
  color:#091;
  }
  .Left{
  float:left;
  margin:0 0.5625em 0 1.125em;
  }
  .Message{
  border-style:solid;
  border-width:0.0625em;
  margin:0 0 1.125em;
  padding:1em 1.0625em 0;
  }
  .Message p{
  margin:0 0 1.0625em;
  padding:0.0625em 0 0;
  }
  .Narrow{
  width:15.75em;
  }
  .Narrow input[type=text]{
  width:13.5em;
  }
  .Right{
  float:right;
  margin:0 1.125em 0 0.5625em;
  }
  .Wide{
  /*       */
  background:gray;
  /*       */
  width:31.5em;
  }
  .Wide input[type=text]{
  width:29.25em;
  }
  .Wide textarea{
  width:29.25em;
  }
  .Wrapper{
  background:url(../i/grid_w18_h18.png);
  margin:0 auto;
  overflow:hidden;
  padding:1.125em 0 0;
  position:relative;
  width:50.625em;
  }
  #Blackboard{
  background:#171717;
  color:#fff;
  margin:1.125em 0 0;
  min-width:50.625em;
  }
  #Blackboard a{
  background:#111;
  color:#fff;
  }
  #Blackboard h3{
  color:#fff;
  }
  #Blackboard div&gt;p{
  font:1.5em/1.5em Georgia,serif;
  }
  #Footer{
  background:#901;
  clear:both;
  color:#fff;
  min-width:50.625em;
  }
  #Footer h3{
  color:#fff;
  }
  #Google_Copilot ol{
  padding:0;
  }
  #Google_Copilot ol li{
  list-style:none;
  margin:0 0 1.125em;
  padding:0; /* I.E.7 Fix  */
  }
  #Google_Map{
  height:23.625em;
  margin:0 0 1.125em;
  width:31.5em;
  }
  #Google_Query dt{
  /*     display:none; */
  }
  #Header{
  background:#901;
  min-width:50.625em;
  }
  #Header h1{
  background:url(../i/the_shropshire_arms_w288_h72.gif) no-repeat 0 2.8125em;
  font:1em/1.125em serif;
  height:7.875em;
  margin:0 0 0 0.5625em;
  width:18em;
  }
  #Header h1 a{
  display:none;
  }
  #Header h2{
  background-color:#933;
  display:inline;
  font:1em/2.25em Georgia,serif;
  left:0;
  margin:1.125em 0 0 0.5625em;
  padding:0 0.5625em;
  position:absolute;
  top:0;
  }
  #Header h2 a{
  color:#fff;
  text-decoration:none;
  }
  #Header h2 a span{
  text-decoration:underline;
  }
  #Header ul{
  list-style:none;
  height:2.25em;
  margin:0;
  padding:0;
  }
  #Header ul li{
  display:inline; /* I.E.7 Fix  */
  }
  #Header ul li a{
  background:#fff;
  color:#000;
  float:left;
  line-height:2.25em;
  margin:0 0 0 0.5625em;
  padding:0 0.5625em;
  text-decoration:none;
  }
  #Header .Wrapper{
  background:url(../i/shield_w126_h126.gif) no-repeat 42.1875em 1.6875em;
  }
  </code></pre>
  
  <p>This post could get stupidly long so I'll provide a link to the Web page rather than post the HTML: <a href="http://theshrop.com/d/call_us_or_call_in.php" rel="nofollow noreferrer">http://theshrop.com/d/call_us_or_call_in.php</a></p>
  
  <p>I really appreciate answers and all who contribute, thanks in advance!</p>