To make IE7, IE8 and Firefox the same you need to make several edits:-
Add a doctype, html and body tags
Remember that a divs total width is the basic width plus side margin, side padding and side borders.
Your container div #topheader is 800px so the TOTAL width of the other divs needs to be 800px.
Add padding: 0; to #nav for the ul tag
You don't need auto for the margin for #nav or #logo if the total width is designed to fit exactly (but it does no harm).
Try this html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="keywords" content="Wickham" />
<meta name="description" content="Test items" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="leng-styles.css" type="text/css"
media="screen" />
<title>Test</title>
</head>
<body>
<div id="topheader">
<div id="logo"></div>
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
and this CSS (I changed the css file url from PHP to my filename):-
Code:
body {
margin: 0 0 20px 0;
padding: 0;
color:#FFFFFF;
}
#page {
background-color: white;
margin: 0px;
padding: 0;
width: 100%;
border: 1px solid #959596;
}
#topheader {
background-color: pink;/*#FFFFFF;*/
padding: 0px;
height: auto;
width: 800px;
margin: 0px auto;
border:#333333 1px solid;
font-size:18px;
font-weight:lighter;
color:#999999;
}
#logo {
background: #73a0c5 url('images/logo.jpg') no-repeat;
height: 90px;
border: solid 1px #FF0000;
width: 798px; /*800px;*/
margin: 0; /*auto;*/
}
#nav { padding: 0;
list-style:none;
margin: 0; /*auto;*/
width:794px; /*800px;*/
border: solid 3px #00FF00;
}
#nav li {
list-style:none;
display:inline;
padding: 0 0 0 25px;
margin: auto;
border: solid 1px #FF0000;
}
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.
Reply With Quote
