I am trying to make box to be fixed in the lower right border of the page and doesn't move with the page scrolls down. But it's not working for me dunno why. Here is my code:
<html>
<head>
<style type="text/css">
.tooltip {
width: 200px;
position: fixed;
top:auto;
bottom:0px;
right:0px;
left:auto;
}
</style>
</head>
<body>
<div class="tooltip">
<div class="tooltip_top">1</div>
<div class="tooltip_con">2</div>
<div class="tooltip_bot">3</div>
</div>
</body>
</html>
It works fine in FF and Chrome ..
older versions of IE did not support position:fixed correctly .. not sure about latest version..
Also make sure you have a doctype defined ..
Huh, should work. Maybe remove top: auto?
(It won’t work in IE 6 though, as IE 6 doesn’t support position: fixed.
Seems to be working for me.... I believe in IE7 and greater you will need to define a doctype, search for "quirks mode" if you don't know where to start on that.
I don't think IE6 supports position:fixed.
Your html/css is only broken in IE. Change from position: fixed; to position: absolute; and it should work more like you want it to.
You can also apply the doctype element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">