Many times we need to use fixed position along with relative, static and absolute position in style sheet, specially in AJAX progress bar. Now question is what it does actually? To show the longer content of a web page, browser use scroll bar which can make your progress message out of the sight. Specially, while we update at the bottom of the ajax update panel, user might not notify about the waiting message or update message. We can easily fix the problem by using 'position: fixed' in CSS. But problem is IE6 or older version of IE, don't understand this. To make it understand on this particular style, we need to write a little javascript code in the CSS. Let see that simple code below:
.updateProgress
{
background-color:#CF4342;
color:White;
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
right: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
Now for cross browser support let see the full code below:
<style type="text/css">
.updateProgress
{
background-color: #CF4342;
color: White;
top: 0px;
right: 0px;
position: fixed;
}
.updateProgress img
{
vertical-align: middle;
margin: 2px;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
.updateProgress
{
background-color:#CF4342;
color:White;
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
right: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
.updateProgress img {
vertical-align:middle;
margin:2px;
}
</style>
<![endif]>
<![endif]-->
That’s all. Enjoy Programming!
