Wed, 2008-10-29 01:27
OK, so I have found two methods to make this work, but one works in Firefox and the other works in IE. Looking to see if anyone can spot a problem that could fix the css to work for both (rather than @import and all that jazz).
First look have a look at the site:
http://jaidadance.com/index2.html
The problem is in IE... for some reason "overflow:hidden" on the body tag isn't working (notice the scroll bar on the right in IE. Setting "height:100%" solves IE's problem, but creates a problem in Firefox where the body (and thus background image) only extends as far as the bottom of all the contained divs. Here's the relevant CSS. Any help?
body{
background: #000 url(/images/body_bg.jpg) no-repeat top center;
height: 1280px;
width: 100%;
display: table;
font: 90% "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif;
color: #ffdaf2;
padding: 0;
margin: 0;
overflow: hidden;
}
#body_wrap{
margin:0 auto;
width:850px;
display: block;
min-width: 850px;
}
Wed, 2008-10-29 08:56
#1
Does "IE" mean "IE6"? IE
Does "IE" mean "IE6"? IE has issues with the overflow property. IE6 has issues with the height property: it thinks height = minheight, and doesn't actually recognise the CSS for "min-height". IE7 doesn't have that problem.
Usually when I'm doing 100% height pages, I do something like this:
html, body {
height: 100%; /*html for IE I'm guessing-- I don't put ANYTHING else on html element!!*/
}
body {
rest of body stuff;
position: relative; /*soothing and calming to IE I guess*/
}
#container /*who is the sole, direct child of body!!*/ {
min-height: 100%;
overflow: hidden;
other styles;
}
* html #container {height: 100%; overflow: visible;}
I'm not sure about the overflow visible thing but a crusty on another forum once said IE6 can have issues with the overflow: hidden (it sure as hell doesn't obey it!).
This usually works good enough, though it never does anything like equal-columns or anything-- I don't do equal-column pages. That's a 100% height page but with different stuff going on.