...

View Full Version : A bit issue about Position: Fixed ( IE hack )



bigtiger
05-04-2008, 08:48 PM
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:

* html {
overflow-x: hidden;
}

#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');
}

HTML:


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



* html body.minwidth {
_width: expression(document.documentElement.clientWidth < 810 ? "808px" : "99.9%");
}

A lot of quesstions.
Thanks for help.

Regards,
Eric,

Candygirl
05-05-2008, 02:21 PM
Hello,

First of all, there are some ; missing in the css you give:


* 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 (http://www.w3.org/QA/2002/04/valid-dtd-list.html) 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:


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

bigtiger
05-06-2008, 06:03 AM
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.

Candygirl
05-06-2008, 08:50 AM
This is your code with the correction I've suggested. Doesn't it work for you ?


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum