I just posted a tester page for my new website but it doesn't display properly in Internet Explorer, I switched to Mozilla but I was wondering if there is any way I can make it look as it is meant to in Internet Explorer? The website is <!-- w --><a class="postlink" href="http://www.harrymills.co.uk">www.harrymills.co.uk</a><!-- w -->.
Thanks
Dathor VerloxLooks like you are trying to use postion: fixed, eh? If so, take a look at this hack (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=GhostInTheBox">http://css-discuss.incutio.com/?page=GhostInTheBox</a><!-- m -->) to get it to work in IE6...Thanks pyro but which bit do I use and how do I implement it?Did you read the page, and view the demos? I've never used it, so I'd just have to look at what they did, and replicate it, as well. You should be able to figure out what to do from their write up on it, or the source the go along with their demos.I read the page a few times and checked all the demos but I still dunno how to incorperate it into my current CSS. I might just use conditional comments to tell IE users to get a better browser.
Thanks for the help
Dathor VerloxIs this the basic layout you were aiming for?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title and nav with scrolling content</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
}
div.titlebar {position: fixed;
background:#cfc;
top: 0; left: 0; width: 100%; height: 100px;
overflow: visible;
}
div.navibar {position: absolute;
background:#ffc;
top: 100px; left: 0px; bottom: 20px;
height:expression(document.body.clientHeight - 120);
width: 15%;
overflow: auto;
}
div.main {position: absolute;
background:#ccc;
top: 100px; left: 15%; right: 0px; bottom: 20px;
height:expression(document.body.clientHeight - 120);
width: 85%;
overflow: auto;
}
-->
</style>
</head>
<body>
<div>
<div class="titlebar">banner</div>
<div class="navibar">navigation</div>
<div class="main">document contents
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
</div>
</body>
</html>I have to ask, what is this...
"height:expression(document.body.clientHeight - 120);"
I get the idea of what it's doing, but I've never seen it before and I wonder what kind of browser support it has.IE specific
Thanks
Dathor VerloxLooks like you are trying to use postion: fixed, eh? If so, take a look at this hack (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=GhostInTheBox">http://css-discuss.incutio.com/?page=GhostInTheBox</a><!-- m -->) to get it to work in IE6...Thanks pyro but which bit do I use and how do I implement it?Did you read the page, and view the demos? I've never used it, so I'd just have to look at what they did, and replicate it, as well. You should be able to figure out what to do from their write up on it, or the source the go along with their demos.I read the page a few times and checked all the demos but I still dunno how to incorperate it into my current CSS. I might just use conditional comments to tell IE users to get a better browser.
Thanks for the help
Dathor VerloxIs this the basic layout you were aiming for?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title and nav with scrolling content</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
}
div.titlebar {position: fixed;
background:#cfc;
top: 0; left: 0; width: 100%; height: 100px;
overflow: visible;
}
div.navibar {position: absolute;
background:#ffc;
top: 100px; left: 0px; bottom: 20px;
height:expression(document.body.clientHeight - 120);
width: 15%;
overflow: auto;
}
div.main {position: absolute;
background:#ccc;
top: 100px; left: 15%; right: 0px; bottom: 20px;
height:expression(document.body.clientHeight - 120);
width: 85%;
overflow: auto;
}
-->
</style>
</head>
<body>
<div>
<div class="titlebar">banner</div>
<div class="navibar">navigation</div>
<div class="main">document contents
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
</div>
</body>
</html>I have to ask, what is this...
"height:expression(document.body.clientHeight - 120);"
I get the idea of what it's doing, but I've never seen it before and I wonder what kind of browser support it has.IE specific