Hello all,
i was trying to work out a two column page with a FIXED left navigation bar. We all know that IE doesn't work well with fixed divs. So i surfed around and find a way to work around this issue. However in IE the scrollbar is in the page itself, so a bit to the left of the right side of the page. I was hoping you could help me out on this issue. Here is the code :
CSS:
code:
--------------------------------------------------------------------------------
body
{
height: 100%;
overflow: auto;
}
#navigation
{
position:fixed;
_position:absolute;
_top:expression(eval(document.body.scrollTop ) );
top:0px;
left:0px;
width: 10em;
margin:0px;
padding:0px;
}
#content
{
margin-left: 10em;
height: 100%;
overflow: auto;
}
--------------------------------------------------------------------------------
HTML :
code:
--------------------------------------------------------------------------------
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content="Antenne-Tilburg.nl"> <meta name="keywords" content="%keywords searchengines%"> <link rel="stylesheet" type="text/css" href="test_layout.css" /></head>
<body><div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div><div id="navigation"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </div> <div id="content"> <h1>WELCOME</h1> <p>Hello there visitor welcome to this page.</p><br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page.<br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page. <br/><br/>Welcome to this page.</div></body></html>
-------------------------------------------------------------------------------- |
