SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Nov 7, 2004, 21:38 #1
- Join Date
- Aug 2002
- Location
- Perth, Australia
- Posts
- 414
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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"> </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 /> - Rica Erickson (Botanical Collection)<br /> </p> <p id="brearley_caption">Sir Norman<br /> Brearley's pilot licence, 1937<br /> </p> </div> </div>
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; }
-
Nov 7, 2004, 22:40 #2
- Join Date
- Aug 2002
- Location
- Perth, Australia
- Posts
- 414
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
-
Nov 8, 2004, 02:42 #3
- Join Date
- Nov 2004
- Location
- Bahrain
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Was that a question or an answer?!
;-)
H.
-
Nov 8, 2004, 03:48 #4
- 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 ;-)
Bookmarks