...

View Full Version : FireFox 100% Height issue



mcohnen
05-16-2008, 06:20 PM
Hi!

First of all, i am new to this community, so i just wanted to apologize if i make too many mistakes when writing english, as it is not my mother language.

I am having problems with the Firefox height:100%. I have been reading a lot about this issue but i am still not able to solve it.

This is my scenario:

I simply want to make a lightbox effect using css, so i need to have a layer(the one for the shadow) that:

- Has position:absolute, top:0, left:0, so that it is on the top left corner
- Width:100%, so that it covers all the page-
- Height:100%, and with this i am not meaning viewports height, but document height.

This is the simplest code


<html>
<head>
<style>
#box{
width:300px;
height:1200px;
background-color:red;
}
#light{
width:100%;
height:100%;
background-color: green;
position:absolute;
top:0;
left:0;
}
html{
height:100%;
}

body{
height:100%;
}
</style>
</head>
<body>
<div id="light"></div>
<div id="box"></div>

</body>
</html>


This is working for IE, but not for FF. I know firefox inherits body and html heights, so i set them to 100%. But it looks as if FireFox's height for body or html is default to viewports height...

Can someone put some light on this?

Thank you a lot and i hope I have been clear enough...

_Aerospace_Eng_
05-16-2008, 06:29 PM
Yes you are right. What you might need to do is use position:fixed; on the overlay. Since you say its working in IE. Maybe you can feed position:absolute; to IE only.

mcohnen
05-16-2008, 06:43 PM
Thanks! This Code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#box{
width:300px;
height:1200px;
background-color:red;
}
#light{
width:100&#37;;
height:100%;
background-color: green;
position:fixed;
top:0;
left:0;
}
html{
margin:0px;
}

body{

}
</style>
</head>
<body>
<div id="light"></div>
<div id="box"></div>

</body>
</html>


Is working fine for IE7 and FF, but is not working in IE6. What is the needed hack? Changing it to position:absolute does not solve it to IE6...

Thanks !!!

_Aerospace_Eng_
05-16-2008, 06:44 PM
You said it was working in IE though? Was it working in IE6 before you started using position:fixed?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum