2 replies [Last post]
yancowles
Offline
newbie
England
Last seen: 12 years 25 weeks ago
England
Joined: 2008-05-31
Posts: 2
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

yancowles
Offline
newbie
England
Last seen: 12 years 25 weeks ago
England
Joined: 2008-05-31
Posts: 2
Points: 0

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