Fixed Banner which doesn't move when you scroll!!!!

Discussion in 'CSS' started by nwk, Feb 24, 2007.

0
  1. #1 
    
<html>
<head>
</head>
<style>
.main{
float:right;
font: 20pt, "Times new Roman";
}
.box{
position: fixed;
width:300px;
height:300px;
background: green;
font: 30pt, Arial;
}
</style>
<body>
<div class="main">
Hi, This Is the Webpage and 
<br/><br/><br/><br/>It moves when you scroll.. </div>
<div class="box">
This box should be fixed and not move even if you scroll the webpage.
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
    Code (markup):
    When you view the webpage given In the above html code the green box doesn't move even if you scroll the webpage. It stays in front of you whatever you do in that webpage. However it works only in Mozilla but not in IE.
    Is There any way You can make it work it in IE....
     
    nwk, Feb 24, 2007 IP
    bnts likes this.
  2. DXL

    DXL Peon

    Messages:
    380
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #2
    IE didn't implement position: fixed, so you need a hack to get it done.
    See this article.
     
    DXL, Feb 24, 2007 IP