Menu
I am trying to replicate layout of html5doctor.com. I have IE8 installed here. I am able to produce following output:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
<a href="#">Home</a>
<li class="menu">
<a href="#">Products</a>
<li class="menu">
<a href="#">About Us</a>
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
Notice li.menu:hover in above CSS. It is not working in IE8. So I added <!DOCTYPE html> as suggested at this thread.
It made hover work but now it broke the layout as follows:
I will like to get result that will work on IE8 first and then will like to learn work around that will work consistently in major (may not be in IE6) browser. And will glad to stick to CSS and HTML (no script). And above all will like to learn whats exactly wrong here.
451
Remove the text-align:center; from the body and use margin:auto for the block elements you want centered in the page..
The elements that require it are #navmenus and #content, so
#navmenus
{
background-color:#14B3F7;
width:900px;
margin:0 auto;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin:0 auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
