SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE6 = 1px out compared other browsers

    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!
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  2. #2
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Problem solved

    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.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Bahrain
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Was that a question or an answer?!

    ;-)

    H.

  4. #4
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I think the title of the post, "Problem Solved" answers that for you ;-)
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •