<!DOCTYPE HTML>
<html>
<head>
<title>Using CSS Fixed Position Across Browsers</title>
<style type="text/css">
div.fixed-position {
background-color: #F0F0F0 ;
border: 1px solid #CCCCCC ;
height: 48px ;
line-height: 50px ;
position: fixed ;
text-align: center ;
width: 148px ;
z-index: 1000 ;
}
div.fixed-n {
left: 50% ;
margin-left: -75px ;
top: 0px ;
}
div.fixed-n-e {
right: 0px ;
top: 0px ;
}
div.fixed-e {
margin-top: -25px ;
right: 0px ;
top: 50% ;
}
div.fixed-s-e {
bottom: 0px ;
right: 0px ;
}
div.fixed-s {
bottom: 0px ;
left: 50% ;
margin-left: -75px ;
}
div.fixed-s-w {
bottom: 0px ;
left: 0px ;
}
div.fixed-w {
margin-top: -25px ;
left: 0px ;
top: 50% ;
}
div.fixed-n-w {
left: 0px ;
top: 0px ;
}
</style>
<!--
IE-6 Hacks.
NOTE: I am using the "_" hack here because my version of
IE "stand alone" doesn't seem to support conditional
comments: [if lt IE 7.0].
Tip gotten from:
http://www.howtocreate.co.uk/fixedPosition.html
-->
<style type="text/css">
body {
_background-color: gold ;
}
div.fixed-position {
_position: absolute ;
}
div.fixed-n-w,
div.fixed-n,
div.fixed-n-e {
_top: expression( ie6 = (document.documentElement.scrollTop + "px") ) ;
}
div.fixed-e,
div.fixed-w {
_top: expression( ie6 = (document.documentElement.scrollTop + (document.documentElement.clientHeight / 2) + "px") ) ;
}
div.fixed-s-w,
div.fixed-s,
div.fixed-s-e {
_bottom: auto ;
_top: expression( ie6 = (document.documentElement.scrollTop + document.documentElement.clientHeight - 52 + "px") ) ;
}
</style>
</head>
<body>
<div class="fixed-position fixed-n">
North
</div>
<div class="fixed-position fixed-n-e">
North East
</div>
<div class="fixed-position fixed-e">
East
</div>
<div class="fixed-position fixed-s-e">
South East
</div>
<div class="fixed-position fixed-s">
South
</div>
<div class="fixed-position fixed-s-w">
South West
</div>
<div class="fixed-position fixed-w">
West
</div>
<div class="fixed-position fixed-n-w">
North West
</div>
<!-- ------- -->
<!-- ------- -->
<div style="height: 3000px ;">
. <!--- To force scrolling. ---> .
</div>
</body>
</html>
Source: http://www.bennadel.com/blog/1734-Using-CSS-Fixed-Position-Elements-Across-Browsers.htm
<html>
<head>
<title>Using CSS Fixed Position Across Browsers</title>
<style type="text/css">
div.fixed-position {
background-color: #F0F0F0 ;
border: 1px solid #CCCCCC ;
height: 48px ;
line-height: 50px ;
position: fixed ;
text-align: center ;
width: 148px ;
z-index: 1000 ;
}
div.fixed-n {
left: 50% ;
margin-left: -75px ;
top: 0px ;
}
div.fixed-n-e {
right: 0px ;
top: 0px ;
}
div.fixed-e {
margin-top: -25px ;
right: 0px ;
top: 50% ;
}
div.fixed-s-e {
bottom: 0px ;
right: 0px ;
}
div.fixed-s {
bottom: 0px ;
left: 50% ;
margin-left: -75px ;
}
div.fixed-s-w {
bottom: 0px ;
left: 0px ;
}
div.fixed-w {
margin-top: -25px ;
left: 0px ;
top: 50% ;
}
div.fixed-n-w {
left: 0px ;
top: 0px ;
}
</style>
<!--
IE-6 Hacks.
NOTE: I am using the "_" hack here because my version of
IE "stand alone" doesn't seem to support conditional
comments: [if lt IE 7.0].
Tip gotten from:
http://www.howtocreate.co.uk/fixedPosition.html
-->
<style type="text/css">
body {
_background-color: gold ;
}
div.fixed-position {
_position: absolute ;
}
div.fixed-n-w,
div.fixed-n,
div.fixed-n-e {
_top: expression( ie6 = (document.documentElement.scrollTop + "px") ) ;
}
div.fixed-e,
div.fixed-w {
_top: expression( ie6 = (document.documentElement.scrollTop + (document.documentElement.clientHeight / 2) + "px") ) ;
}
div.fixed-s-w,
div.fixed-s,
div.fixed-s-e {
_bottom: auto ;
_top: expression( ie6 = (document.documentElement.scrollTop + document.documentElement.clientHeight - 52 + "px") ) ;
}
</style>
</head>
<body>
<div class="fixed-position fixed-n">
North
</div>
<div class="fixed-position fixed-n-e">
North East
</div>
<div class="fixed-position fixed-e">
East
</div>
<div class="fixed-position fixed-s-e">
South East
</div>
<div class="fixed-position fixed-s">
South
</div>
<div class="fixed-position fixed-s-w">
South West
</div>
<div class="fixed-position fixed-w">
West
</div>
<div class="fixed-position fixed-n-w">
North West
</div>
<!-- ------- -->
<!-- ------- -->
<div style="height: 3000px ;">
. <!--- To force scrolling. ---> .
</div>
</body>
</html>
Source: http://www.bennadel.com/blog/1734-Using-CSS-Fixed-Position-Elements-Across-Browsers.htm
No comments:
Post a Comment