2 replies [Last post]
3quid
Offline
newbie
Last seen: 15 years 46 weeks ago
Joined: 2004-09-13
Posts: 5
Points: 0

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 Sad

thanks in advance for any help

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

3quid
Offline
newbie
Last seen: 15 years 46 weeks ago
Joined: 2004-09-13
Posts: 5
Points: 0

100% height, absolute positioned, div

ok thanks chris