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 Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A bit issue about Position: Fixed ( IE hack )

    Hmm...

    It is hardly to say the issues but it might be common on anywhere.
    To short, it may be the position: fixed issues.

    To Longest, I wish to do a screen that is show on browser window when a button was click. Then on top of it, it show some settings that allowed user to config to. But the items on the background are not clickable and those were mask with an element it's opacity was set to some level such as say 70%.
    And the mask have it's width and height 100% of the browser contents.

    I have did a lot of these by checked out the strick thead on top of the thread list. (IE/windows Position: fixed) and by some apps that present some demo.

    The following is the code I have used:

    CSS:
    PHP Code:
    html {
        
    overflow-xhidden;
    }

    #TB_overlay {
         
    positionfixed
         z
    -index100;
         
    top0px;
         
    left0px;
         
    height100%;
         
    width100%;
    }

    #TB_overlayBG {
         
    background-color#000;
         
    filteralpha(opacity=70);
         -
    moz-opacity0.75
         opacity
    0.75
    }

    html #TB_overlay {
         
    positionabsolute;
         
    heightexpression(document.body.scrollHeight document.body.offsetHeight document.body.scrollHeight document.body.offsetHeight 'px');

    HTML:
    PHP Code:
    <html>
    <
    body>
    <
    div id="TB_overlay" class="TB_overlayBG">
    </
    div>
    </
    body>
    </
    html
    It is work well in FF, but in IE, the mask element won't cover the whole browser. ( the height )
    Is it possibe in IE as in FF ?

    Besides that, there are a few more questions about the code.
    1.) What is the * html ? Is this for IE only ?
    2.) How the expression() works
    3.) What is the mean of _width ?

    PHP Code:
    html body.minwidth {
        
    _widthexpression(document.documentElement.clientWidth 810 "808px" "99.9%");

    A lot of quesstions.
    Thanks for help.

    Regards,
    Eric,

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    First of all, there are some ; missing in the css you give:
    Code:
    * html {
        overflow-x: hidden; /* no need, we don't emulate a real position fixed */
    }
    
    #TB_overlay {
         position: fixed;
         z-index: 100;
         top: 0px;
         left: 0px;
         height: 100&#37;;
         width: 100%;
    }
    
    .TB_overlayBG {
         background-color: #000;
         filter: alpha(opacity=70);
         -moz-opacity: 0.75;
         opacity: 0.75; /* ok, this one is optional ;) */
    }
    
    * html #TB_overlay {
         position: absolute;
         height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    }
    It is work well in FF, but in IE, the mask element won't cover the whole browser. ( the height )
    Is it possibe in IE as in FF ?
    You didn't put any doctype in the html, navigators are in quirks mode. You should put a valid doctype on the very top of your document to makes IE6 turn into standards mode. Then you need to add a height for your div's ancestors:

    Code:
    html, body {
      height:100%;
      margin:0;padding:0;
    }
    that's it.

    1.) What is the * html ? Is this for IE only ?
    It is for IE 6 and under only. IE7 won't interpret it.

    2.) How the expression() works
    It works in IE. It's a way to inject javascript in css. Except mistake, if javascript is not active it will not work.

    3.) What is the mean of _width ?
    Placing an underscore is another IE hack. It's not valid but I figure that IE mac doesn't interpret it contrary to * hack
    Last edited by Candygirl; 05-05-2008 at 01:24 PM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm...


    I have did set both of the elements to height: 100%
    ( html, body and also all things to enable standard mode )

    It seems that it is work on FF, but not on IE when the page's content is not
    over one page. ( i.e. all content are showed and not scrolling required ).

    Thanks.

  • #4
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    This is your code with the correction I've suggested. Doesn't it work for you ?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>opacity</title>
    <style type="text/css">
    
    html,body {height:100%;margin:0;padding:0;}
    
    #TB_overlay {
         position: fixed;
         z-index: 100;
         top: 0px;
         left: 0px;
         height: 100%;
         width: 100%;
    }
    
    .TB_overlayBG {
         background-color: #000;
         filter: alpha(opacity=70);
         -moz-opacity: 0.75;
         opacity: 0.75;
    }
    
    * html #TB_overlay {
         position: absolute;
         height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    }
    </style>
    </head>
    
    <body>
    <div id="TB_overlay" class="TB_overlayBG"></div>
    <div>	lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />lorem <br />
    </div>
    </body>
    </html>
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Posting Permissions

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