IE6 = 1px out compared other browsers

**Alexandra** · Nov 7, 2004, 21:38

I've been designing in CSS for a while, but even so there's always something that still trips me up. In this particular case it is IE6 being 1 pixel out compared to Mozilla Firefox 1.0PR and Opera 7.2.

I can't find the cause of the difference and I'm hoping somebody here may be able to help me out. Is it just the box model issue, or is it something else?

The site in question can be found here - (http://www.cadmium.com.au/clients/si...D054/index.htm).

If you view the site in Internet Explorer 6, you will see the left border of the heading is overlapped, and there is a 1px gap between the header and the border on the right, like the whole hader has shifted left 1 pixel.

Now, in Firefox 1.0PR and Opera 7.2 the header aligns correctly, no dramas at all.

I've included below the code for the header, and the CSS used. If anybody can point me in the right direction here, I'd be most grateful.

The HTML:

HTML Code:

<div id="header">
    <img id="orchid" src="images/battye_header_orchid.jpg" height="243" width="206" alt="Butterfly Orchid from the Rika Erickson Botanical Collection" title="Butterfly Orchid from the Rika Erickson Botanical Collection" />
    <img id="augustin" src="images/battye_header_augustin.jpg" height="243" width="454" alt="Babette Augustin and children in front of the family farm from the diary of Babette Augustin" title="Babette Augustin and children in front of the family farm from the diary of Babette Augustin" />
    <div id="header_line">&nbsp;</div>
    <img id="treasures" src="images/battye_header_treasures.jpg" height="71" width="328" alt="Treasures of the Battye Library" />
    <img id="brearley" src="images/battye_header_brearley.jpg" height="147" width="164" alt="Sir Norman Brearley's Pilot Licence, 1937" title="Sir Norman Brearley's Pilot Licence, 1937" />
    <div id="header_captions">
      <p id="augustin_caption">Babette Augustin and children in front of the family farm<br />
      - Diary of Babette Augustin<br />
      </p>
      <p id="orchid_caption">Butterfly Orchid<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Rica Erickson (Botanical Collection)<br />
      </p>
      <p id="brearley_caption">Sir Norman<br />
      Brearley's pilot licence, 1937<br />
      </p>
    </div>
  </div>

Here's the CSS:

Code:

#header {
  margin: 0;
  padding: 0;
}

#header img#orchid {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#header img#augustin {
  position: absolute;
  top: 0;
  left: 206px;
  z-index: 1;
}

#header_line {
  position: absolute;
  top: 223px;
  left: 0;
  width: 660px;
  height: 1px;
  border-top: 1px solid #7f7f7f;
  z-index: 2;
}

#header img#treasures {
  position: absolute;
  top: 152px;
  left: 164px;
  z-index: 3;
}

#header img#brearley {
  position: absolute;
  top: 184px;
  left: 486px;
  z-index: 4;
}

#header_captions p {
  font: 9px Tahoma, Verdana, Arial, Helvetica, sans-serif;
  color: #9f9f9f;
  z-index: 5;
  padding: 0;
  margin: 0;
}

#header_captions p#augustin_caption {
  position: absolute;
  top: 0;
  right: 0;    
  text-align: right;
  padding: 3px 3px 0 0;
}

#header_captions p#orchid_caption {
  position: absolute;
  top: 225px;
  left: 220px;
  text-align: left;
}

#header_captions p#brearley_caption {
  position: absolute;
  top: 322px;
  left: 538px;
  text-align: left;
  padding-right: 3px;
}

Again, if anyone can help, I'd really appreciate it. I've obviously being staring at the code too long and can't find the problem!

**Alexandra** · Nov 7, 2004, 22:40

I've solved the problem. I used a Modified Simplified Box Model Hack (http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html) in the header and that solved the alignment issue. The revised code is below:

Code:

#header img#orchid {
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 1;
}

* html #header img#augustin {
  position: absolute;
  top: 0;
  left: 207px;
  z-index: 1;
}

#header img#augustin {
  position: absolute;
  top: 0;
  left: 206px;
  z-index: 1;
}

The site now displays consistently across IE, Firefox and Opera.