CSS2 Sticky-Text Demo
with conditional comments for IE5.5 and IE6
Description:
If your browser supports Fixed Positioned containers or divisions - as most modern browsers do, you should see a yellow box in the lower right portion of this screen. As you scroll up or down, the box remains visible. If you are using an obsolete browser like Netscape 4, the yellow box is not visible until you scroll down to the end of this page.
Method:
CSS Code
#Sticky {
color:#FF0000;
background: #FFCC00;
position:fixed; /** IE7+, Firefox, Mozilla, Opera, Safari, Konqueror... will use this **/
bottom:2px;
right:2px;
padding: 0 10px 0 10px;
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
_position: absolute; right: 2px; bottom: 2px;
}
For IE5.5 and IE6, add a conditional comment to the html page. For more discussion about why this works, visit http://www.howtocreate.co.uk/fixedPosition.html
Html Conditional Comment
<head>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#Sticky {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -2 - Sticky.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -2 - Sticky.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
</head>
Html Sticky Code
<body>
<div id="Sticky">
<p>Here is some sticky text.</p>
</div>
</body>
</html>
Related Links:
- Photoshop Tutorial - Making a White Box with Contoured Edges
- CSS2 - Bringing Image Slices into a CSS Layout
- CSS2 - Centered Page - Fixed Width
- CSS2 - Centered Page - Liquid Layout
- CSS2 - Captions on Floated Images
- CSS2 - Sticky-Text Demo
- CSS3 - Rounded Corners Demo
