Hi all,
I've searched the forum for a similar problem but can't seem to find anything.
I have a 2 column floated layout that works well in the usual suspects apart from IE 6 where the left column is 2px deeper than it should be i.e. it's 502px not 500px.
It appears to be something to do with the images I've used since, when they are removed it works fine.
Can anyone help?
Thanks
Yan
css
body {
margin:0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.5em;
line-height: 1.5em;
letter-spacing: 0px;
text-align:center;
}
#frame {
width: 750px;
height: 500px;
margin-right:auto;
margin-left:auto;
margin-top: 15px;
padding: 0px;
text-align:left;
}
#thumbpanel
{
float: left;
padding: 0;
width: 210px ;
height: 500px;
background-color: #877F68 ;
overflow: hidden;
}
p {
margin-left: 0px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #thumbpanel {
margin-right: 0px;
}
* html p {
height: 1%;
margin-left: 0px;
}
/* End hide from IE5/mac */
#nav
{
float: right;
width: 540px ;
height: 56px;
background-color: #191414;
}
#content
{
float: right;
width: 540px ;
height: 444px ;
background-color: #191414;
}
#img_portrait
{
position: relative ;
width: 498px ;
height: 370px ;
margin: 0 auto ;
border-style: solid ;
border-width:2px ;
border-color: #fff;
top: 33px ;
}
#navcontainer ul
{
position: relative;
top: 32px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em .8em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
/*background-color: #369;*/
}
#toprule
{
position: relative;
top: 20px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #fff;
}
#bottomrule
{
position: relative;
top: 12px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #fff;
}
#tagline
{
height: 81px;
width: 210px;
position: relative ;
top: 353px ;
}
#logo
{
height: 63px;
width: 210px;
position: relative ;
top: 0px;
}
html
Photography



You have an incomplete
You have an incomplete doctype which is throwing IE into Quirks Mode.
Fix that up and see if the problem goes away.
no workee
Thanks for looking and posting pineapplehead.
I tried all the examples from alistapart but it renders exactly the same in IE 6 with the annoying 2 pixels extra depth on the LH column.
I have fixed it myself using a conditional comment but I'm not sure this is the way one should really resolve the issue.
Is here if you care to look:
http://www.fit-pixels.com/leah_css/index.htm
Thanks anyway.
Yan