1 reply [Last post]
midevilb
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2008-08-08
Posts: 4
Points: 0

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;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 36 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets