Forum Moderators: not2easy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{
background-color: #000000
}
center{
font-size: 20px;
color: blue;
}
#container{
background-color: #666633;
width: 900px;
height:1090px;
margin-left: 30px;
}
#header{
background-color: #666666;
width:900px;
height:350px;
border: solid 1px;
}
#header-title{
background-color: transparent;
width: 250px;
height: 50px;
border: solid 1px;
margin-top: 150px;
margin-left: 10px;
line-height: 50px;
}
#view-pic{
background-color: #CCCCCC;
width: 900px;
height: 200px;
border: solid 1px;
margin-top: 2px;
margin-bottom: 2px;
}
#left-sidebar{
background-color: #FFCC00;
width: 350px;
height: 450px;
float: left;
}
#left-sidebar1{
background-color: transparent;
width:350px;
height: 225px;
border: solid 1px;
}
#left-sidebar2{
background-color: transparent;
width: 350px;
height: 225px;
border: solid 1px;
}
#main-content{
background-color: #99FFFF;
width: 545px;
height: 452px;
border: solid 1px;
float: right;
margin-left: 1px;
}
#footer{
background-color: #AAAAAA;
width:900px;
height: 50px;
border: solid 1px;
}
#test{
background-color: #CCFF00;
width:900px;
height:30px;
margin-left: 1px;
}
#test li{
float:left;
width: 100px;
margin-left:3px;
line-height:30px;
}
#test a{
display:block;
text-align:center;
}
#test a:link{
color: blue;
background:#CCFF00;
text-decoration:none;
}
#test a:hover{
color:#FFF;
font-weight:bold;
text-decoration:underline;
background:#F00;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-title">Hotel Title</div></div>
<div id="test">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Reservation</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div>
<div id="view-pic"></div>
<div id="left-sidebar">
<div id="left-sidebar1"></div>
<div id="left-sidebar2"></div></div>
<div id="main-content"></div>
<div id="footer"></div></div>
</body>
</html>
This is my 1st time write CSS and DIV, But It cannot show at the Firefox correctly...Anything
I get mistake? Can somebody teach me?
[edited by: SuzyUK at 12:00 pm (utc) on Aug. 7, 2008]
[edit reason] sidescroll and character codes [/edit]
It's correct in Firefox, IE is only containing the floated columns because of bugs, the width/height on the container div is making IE work how you want even though it's the wrong thing by CSS rules.
I'm not sure I can explain this very well, but if you can search for "hasLayout and IE Floats" you may find some explanations in your own language
otherwise one fix here would be to change this bit below, remove the blue bit, and add the red bit
#main-content{
background-color: #99FFFF;
width: 545px;
height: 452px;
border: solid 1px;
/*float: right;*/
overflow: auto; /* could be overflow: hidden; too */
margin-left: 1px;
}
overflow added to this div makes it act like IE.
overflow is the right property to use and IE8 and above will very likely need this too as width/height will no longer trigger the "quirky" IE behaviour you're seeing in IE just now
