4 Replies Latest reply on Oct 4, 2007 12:10 AM by Loco-Motive

    Bottom div is positioned differently in IE and Firefox

    antmendo
      I know this is a fairly common topic, but I've tried to make all of the suggested changes and can't seem to fix the problem. I have been testing mainly in Firefox and had everything aligned perfectly, then checked things out in IE and noticed that my bottom div (#bottom) is not in alignment with the rest of my divs. I can move it one pixel up to align everything in IE, but then the bottom div is located one pixel too high in Firefox. Anyone know what the problem might be? I have copied my CSS below is hopes that someone will find the problem. Thanks in advance for the help.

      * {
      margin:0;
      padding:0;
      }

      html, body {
      height:100%;
      }

      #distance {
      width:1px;
      height:50%;
      margin-bottom:-350px; /* half of container's height */
      float:left;
      display:inline;
      }

      #wrapper {
      position:relative; /* puts container in front of distance */
      text-align:left;
      height:700px;
      width:882px;
      clear:left;
      margin: 0 auto;
      }

      #left {
      position:absolute;
      left:0px;
      top:0px;
      width:167px;
      height:700px;
      z-index:1;
      background-color: #FF6600;
      border-bottom: #000 thin solid;
      border-left: #000 thin solid;
      border-top: #000 thin solid;
      }

      #top {
      position:absolute;
      left:168px;
      top:0px;
      width:690px;
      height:25px;
      z-index:2;
      background-color: #FF6600;
      border-top: #000 thin solid;
      }

      #right {
      position:absolute;
      left:857px;
      top:0px;
      width:25px;
      height:700px;
      z-index:3;
      background-color: #FF6600;
      border-right: #000 solid thin;
      border-bottom: #000 solid thin;
      border-top: #000 solid thin;
      }

      #bottom {
      position:absolute;
      left:168px;
      top:676px;
      width:690px;
      height:25px;
      z-index:1;
      background-color: #FF6600;
      border-bottom: #000 solid thin;
      }

      #logo {
      position:absolute;
      left:2px;
      top:32px;
      width:142px;
      height:50px;
      z-index:1;
      }

      #footer {
      position:absolute;
      left:0;
      top:0.5em;
      width:690px;
      height:12px;
      z-index:1;
      color: #FFFFFF;
      font-family: "Times New Roman", Times, serif;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-align: center;
      }

      #header {
      position:absolute;
      left:0px;
      top:4px;
      width:690px;
      z-index:1;
      }

      #content {
      position:absolute;
      left:168px;
      top:26px;
      width:687px;
      height:648px;
      z-index:1;
      border: #000 solid thin;
      }

      .address {
      color: #FFFFFF;
      font-family: "Times New Roman", Times, serif;
      font-size: 14px;
      letter-spacing: 0.1em;
      }