IE6/7 Display: block problems.

JamesU2005 · 25 Apr 2007 at 12:35

The website displays exactly how it should be in Firefox but IE6 & 7 make a meal of the display block for the navigation.

Any ideas?

Cheers.

XHTML:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>

<body>
<div id="wrapper">
    <div class="header">
      <img src="css/header.jpg" alt="TEST IMAGE HERE" width="539" height="112" />    </div>
    <div class="navmenu">
      <ul>
<li><a href="index.html">Home</a></li>
        <li><a href="#">School Fundraising</a></li>
		<li><a href="#">Corporate</a></li>
        <li><a href="#">Equipment Hire </a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#" id="specialborder">Contact</a></li>
      </ul>
    </div>
  <div class="contentarea">
	  <h2>Welcome to The Test</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dolor. Duis ornare, risus vitae commodo feugiat, velit velit pellentesque purus, in commodo urna arcu vulputate justo.
<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dolor. Duis ornare, risus vitae commodo feugiat, velit velit pellentesque purus, in commodo urna arcu vulputate justo. Nullam egestas porttitor augue. Curabitur at nunc. Sed eget sem. Morbi cursus. Donec rhoncus. Nullam diam. Etiam tincidunt turpis eu purus. <br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dolor.
<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
<br />
<img src="images/test.jpg" alt="TEST" class="memberlogo" />  </div> 
  <div class="imagesarea">
  <img src="images/test1.jpg" alt="TEST" /><br />
<br />
  <img src="images/test2.jpg" alt="TEST" />
  </div> 
  <div class="footer">
  ADDRESS<br />
Home | Site Map | Contact Us 
  </div> 
</div> 
</body>
</html>

CSS:

Code:

body {
	background-color: #58aa28;
}



#wrapper {
width: 770px;
margin: 5px auto 0 auto;
  text-align: left;
  background-image:url(background.gif);
  background-repeat: no-repeat;
    height:770px; 
}

.header {margin-top:10px;
margin-left: 10px;
margin-right: 10px; background-color:#2857a9;
float:left;}

.navmenu ul{
font-size: 100%;
font-family: Arial, Verdana, Tahoma, sans-serif;
margin:0px auto;
margin-left:4px;
margin-right:6px;
padding-left:80px;
padding-right:181px;
min-height: 23px;
height:23px;
width:500px;
background-color: #2857a9;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
float:left;
}

.navmenu ul li{
list-style: none;
display: block;
}

.navmenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: #ffffff;
background-color: #2857a9;
border-left: 2px solid #ffffff;
}

.navmenu ul li a:hover{
background-color: #58aa28
}

#specialborder {
   border-right : 2px solid #ffffff;
}

.contentarea {
font-size: 100%;
font-family: Arial, Verdana, Tahoma, sans-serif;
width: 500px;
height:auto;
float:left;
padding-left:20px;
padding-top:10px;
color:#ffffff;
}

h2 {
margin:0;
padding-bottom:15px;
}

.imagesarea {
font-size: 100%;
font-family: Arial, Verdana, Tahoma, sans-serif;
width: 150px;
height:auto;
float:left;
padding-left:60px;
padding-top:55px;
color:#ffffff;
}

.memberlogo {
padding-left:120px;
}

.footer {
font-size: 100%;
font-family: Arial, Verdana, Tahoma, sans-serif;
width: 500px;
height:auto;
float:left;
padding-left:150px;
padding-top:40px;
color:#ffffff;
text-align: center; 
}

IE6/7 Display: block problems.

JamesU2005

JamesU2005