HTML layout issue in IE6, please help
Hello I have an HTML document as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm开发者_JAVA百科l1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="left">
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>
<div id="right">
text<br>
text<br>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
My CSS file is
#wrapper{
margin:0px auto;
width:1000px;
}
#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#main{
border:#990000 solid 1px;
margin:2px;
padding:5px;
overflow:auto;
}
#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;
margin-right:2px;
}
#right{
float:right;
padding:4px;
border:#CCCCCC solid 1px;
width:320px;
}
This is working good in all browses except IE6, The main area should extend with dynamic contents.
Thanks for the help
You should try validating your web page. You've given it an xhtml doctype but you're definitely not writing valid xhtml. Invalid code like that can frequently cause glitches in different browsers, though in the case of IE6 it may not work right anyway.
Try adding a height: 100% to #main - it's a known hack to make IE render overflow: auto properly.
If i recall correctly IE needs to have a width on the div#main if you want to clear it using the overflow method.
Here's a hack I use. Remember, this is a total hack and shouldn't be substituted for sound css. Paste this into the bottom of your page.
<script type="text/javascript" language="javascript">
function setMainHeight(){
var main = document.getElementById("main");
var left = document.getElementById("left");
var right = document.getElementById("right");
main.style.height = (left.offsetHeight >= right.offsetHeight) ? left.offsetHeight + 'px' : right.offsetHeight + 'px';
}
setMainHeight();
</script>
加载中,请稍侯......
精彩评论