Alt-Web Design & Publishing
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:

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

#Sticky {
color:#FF0000;
background: #FFCC00; /**optionally you could use a semi-transparent.png for a see through effect**/
border: 2px dotted red;
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;
}

 

 

 

 


Earn money from your website with Lunarpages Affiliate Program.
Lunarpages.com Web Hosting

 

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>

The conditional comment above is for IE5.5 and IE6. If no support is required for these browsers, you may omit it from your HTML page. For more about why this works, visit http://www.howtocreate.co.uk/fixedPosition.html

Html Sticky Code

<body>
<div id="Sticky">
<p>Here is some sticky text.</p>
</div>

</body>

</html>

 

 

bookmarks

 

 

Lunarpages.com Web Hosting

 

Valid XHTML 1.0 Transitional    Valid CSS!

Demos:

CSS Templates:

Here is some sticky text.
Link home page