hi
i am trying to get this page ..
www.2hands.co.uk/thames/index2.html
to work in ie as it does in safari and firefox (mac and pc)
the only problem i have is that the green stripe down the side, in ie, will not stretch to 100% of the content like it does in the other browsers. I think it is stretching to 100% of the viewport, but i have set heights for its parent elements... i cant work out what i am missing!
here is my css...
html { height:100%; } body { height:100%; margin:0px auto; } #header { margin:0px auto 0px auto; width:760px; height:30px; padding:5px 0px 0px 0px; } #headercontent { padding:10px } #bannerimg { width:760px; } #container-page { margin: 0 auto; width: 760px; background: #DDD; text-align: left; position: relative; min-height: 100%; height: auto !important; height: 100%; overflow:visible; } * html #container-page { height:100%; } #container-content { padding: 0 250px 40px 5px; min-height: 100%; height: auto !important; height: 100%; } #navbar { display:block; width: 172px; background: #DDD; text-align: left; position:absolute; z-index:1; left:520px; top:0px; min-height: 100%; height: auto !important; height: 100%; height: expression(document.body.offsetHeight - 110 + "px"); background-image:url(images/nav/nav_middle.png); background-repeat:repeat-y; padding:0px 13px 0px 13px; } * html #navbar { height:100%; } #container-foot { width: 100%; background: #CCC; position: absolute; bottom: 0px !important; bottom: -1px; height: 40px; }
if anyone can shed any light on why the div wont go 100% in ie for me I would be REALLY grateful.. i have searched the forum but cant find an example like mine and have tried adapting various techniques without any joy
thanks in advance for any help
100% height, absolute positioned, div
I'd reckon its tied up with mechanism IE uses to calculate heights and your use of an expression.
I don't think you need to use a method like that to get a full height image. Look up faux columns at A List Apart and read the bit on equal height columns in the One True Layout article (middle link in my sig). Either of those two should give you a cross browser way of achieving the look you are after.
100% height, absolute positioned, div
ok thanks chris