Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FireFox 100% Height issue

    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
    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...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! This Code
    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 !!!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You said it was working in IE though? Was it working in IE6 before you started using position:fixed?
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •