Hi all.
I've got a 3 column liquid layout with a header area, 2 fixed width left and right column with a liquid center (mmm liquid center).
Page
<!-- m --><a class="postlink" href="http://www.myitsolutions.com.au/dev/index_dft.php">http://www.myitsolutions.com.au/dev/index_dft.php</a><!-- m -->
Stylesheet
<!-- m --><a class="postlink" href="http://www.myitsolutions.com.au/dev/styles.css">http://www.myitsolutions.com.au/dev/styles.css</a><!-- m -->
looks nice and pretty in firefox but in IE6 there's a pixel here or there off kilt.
first one is the one pixel gap between the bottom of the header div and the top of the middlecolumn div, you can see the gap there where the shadow is supposed to sit directly below the header tag, you'll notice the left and right columns sit snuggled up below the head perfectly, just not the middle column.
the second one is along the right side of the right column there is a whitespace along that. this is noticable because I have another div floated right on the header div giving the look of the column continuing to the top of the window. (I did by the way try actually having the right div continue to the top but it seemed to be more trouble than it was worth). I am able to give the rightcolumn a right:-1 attribute but that just results with firefox getting the issue.
I've looked for the whitespace between divs in the code, I've looked at clear tags in the wrong spot but I can't seem to find the kink in the hose.
Can anyone here see what I'm missing? the code is valid.for in the time being....
use the !important rule, which IE will ignore
ex.
margin: 2px 5px !important; margin:2px 4px;
IE will ignore the important and only read the second which comes afterYeah I chucked in a conditional statement for the rightcolumn issue (not on the address above, on another dev page with content)
<!--[if IE]>
<style type="text/css">
#rightcolumn {
position:absolute;
right: -1px;
top:119px;
padding:0;
width:140px;
height: 100%;
background: url("images/rightbar_bg.jpg") top repeat-y;
}
</style>
<![endif]-->
that works fine for the right column, can't seem to get around the middlecolumn positioning issue, just 1 measly pixel.
1 down 1 to go....
I've got a 3 column liquid layout with a header area, 2 fixed width left and right column with a liquid center (mmm liquid center).
Page
<!-- m --><a class="postlink" href="http://www.myitsolutions.com.au/dev/index_dft.php">http://www.myitsolutions.com.au/dev/index_dft.php</a><!-- m -->
Stylesheet
<!-- m --><a class="postlink" href="http://www.myitsolutions.com.au/dev/styles.css">http://www.myitsolutions.com.au/dev/styles.css</a><!-- m -->
looks nice and pretty in firefox but in IE6 there's a pixel here or there off kilt.
first one is the one pixel gap between the bottom of the header div and the top of the middlecolumn div, you can see the gap there where the shadow is supposed to sit directly below the header tag, you'll notice the left and right columns sit snuggled up below the head perfectly, just not the middle column.
the second one is along the right side of the right column there is a whitespace along that. this is noticable because I have another div floated right on the header div giving the look of the column continuing to the top of the window. (I did by the way try actually having the right div continue to the top but it seemed to be more trouble than it was worth). I am able to give the rightcolumn a right:-1 attribute but that just results with firefox getting the issue.
I've looked for the whitespace between divs in the code, I've looked at clear tags in the wrong spot but I can't seem to find the kink in the hose.
Can anyone here see what I'm missing? the code is valid.for in the time being....
use the !important rule, which IE will ignore
ex.
margin: 2px 5px !important; margin:2px 4px;
IE will ignore the important and only read the second which comes afterYeah I chucked in a conditional statement for the rightcolumn issue (not on the address above, on another dev page with content)
<!--[if IE]>
<style type="text/css">
#rightcolumn {
position:absolute;
right: -1px;
top:119px;
padding:0;
width:140px;
height: 100%;
background: url("images/rightbar_bg.jpg") top repeat-y;
}
</style>
<![endif]-->
that works fine for the right column, can't seem to get around the middlecolumn positioning issue, just 1 measly pixel.
1 down 1 to go....