[css-d] Pixel perfection in IE6 and earlier

[Jason Hart]

I'm trying to put together a CSS / Tableless template for Joomla...

All looks good so far in Firefox, but of course in IE6 there are some
problems...

The following divs have 3 pixles added to the height... top2_2 and top3_2
Also the following divs are 1 pixel to far to the left... top and top3_2

You can see the effect on the test site... http://test.trekcon.com

Any idea what is causing this and how to work around it?
Thanks in advance...

Code is as follows...

HTML
<div id="overall_wrap">
 <div id="top_wrap">
  <div id="header_wrap">
   <div id="header"></div>
   <div id="top2_2"></div>
  </div>
  <div id="top1_1"></div>
  <div id="top1_2"></div>
  <div id="top"></div>
  <div id="top3_2"></div>
 </div>
</div>

CSS
/* LCARS Template CSS File */

* {
 /* Layout and positioning */
 margin:0;
 padding:0;
}

body {
 /* Layout and positioning */
 text-align: center; /* Center hack */
 min-width: 955px; /* Set the same as the site width, or if using fluid then
set to 760px; */
}

#overall_wrap {
 /* Layout and positioning */
 width: 955px; /* Set the site width here... Thin = 760px, Thick = 955px and
Fluid = 100% */
 height: 100%;
 margin:0 auto; /* Center hack */
 /* Colour and design */
 background: #000000;
 /* Format and style */
 text-align: left;
}

#top_wrap {
 /* Layout and positioning */
 width: 100%; /* Ensure this is set to 100% to make header use overall_wrap
width */
 height: 135px;
 position: relative;
 /* Colour and design */
 background: #FF0000;
}

#header_wrap {
 /* Layout and positioning */
 width: auto; /* Ensure this is set to auto to make header_wrap use
overall_wrap width */
 height: 135px;
 margin-left: 90px; /* Left column width */
 margin-right: 165px; /* Right column width */
 position: relative;
 /* Colour and design */
 background: #00FF00;
}

#header {
 /* Layout and positioning */
 width: 100%; /* Ensure this is set to 100% to make header use overall_wrap
width */
 height: 119px;
 position: absolute;
 top: 0px;
 left: 0px;
 /* Colour and design */
 behavior: url("../images/iepngfix.htc");
 background: url(../images/logo.png) center center no-repeat;
}

#top {
 /* Layout and positioning */
 width: 165px; /* Right column width */
 height: 119px; /* header height */
 position: absolute;
 top: 0px;
 right: 0px;
 /* Colour and design */
 background: #0000FF;
}

#top1_1 {
 /* Layout and positioning */
 width: 90px; /* Left column width */
 height: 50px;
 position: absolute;
 top: 0px;
 left: 0px;
 /* Colour and design */
 background: #FFCC66;
}

#top1_2 {
 /* Layout and positioning */
 width: 106px; /* Left column width plus radius of rounded corner */
 height: 83px; /* header_wrap height minus top1_1 minus margin */
 position: absolute;
 top: 52px; /* top1_1 height plus margin */
 left: 0px;
 /* Colour and design */
 background: #8080FF;
}

#top2_2 {
 /* Layout and positioning */
 width: 100%; /* Ensure this is set to 100% to make top2_2 use overall_wrap
width */
 height: 16px;
 position: absolute;
 top: 119px; /* header height */
 left: 0px;
 /* Colour and design */
 background: #FFFF00;
}

#top3_2 {
 /* Layout and positioning */
 width: 165px; /* Right column width */
 height: 16px;
 position: absolute;
 top: 119px; /* header height */
 right: 0px;
 /* Colour and design */
 background: #FF00FF;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/