I am having a wierd problem with IE in CSS... I have a footer that is locked
to the bottom of the page with the bottom attribute set to 0px so it is 0px
from the bottom. but when you view the page in a new IE window the footer
div bar starts ABOVE the bottom, and when you refresh it, then it moves to
the bottom... has anyone ever seen this before and how do you fix it? I have
seen it once before in HTML with tabels on the right side of the screen once
in the past but CSS is new to me now.. here is my HTML and CSS code for this
<head>
<link rel="stylesheet " type="text/css" href="main.css" >
</head>
<html>
<body>
<div id="container" >
<div id="banner">
<h1>Site name</h1>
</div>
<div id="nav">
<p>Lorem ipsum.. </p>
</div>
<div id="content">
<h2>Page heading </h2>
<p>Ut wisi enim.. </p>
</div>
<div id="footer">
Footer stuff here </div>
</div>
</body>
</html>
body {
padding:0px; font-size : 0.9em;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin : 0px
}
#header { position: absolute; left: 0px; top: 0px; height: 45px;
background-color: #2F4571; width:100%; right:1 }
#left{position: absolute; float: left; left: 0px; top: 0px; width: 200px;
background-color: #222222; height:100%}
#footer{positio n: absolute; bottom: 0px; height: 20px; color: #FFFFFF;
background-color: #000000; left:0px; width:100%}
#right{}
#shaddow {position: absolute; float: left; left: 200px; width: 6px;
background-image:
url('images/shadrightdrop2. gif'); background-repeat:
repeat-y;
background-attachment: fixed; background-position: left top;
height:100%}
#content {background-color: #FFCCFF}
#banner {background-color: #99CCFF}
