works in ie6, but not firefox and ie7

The page displays correctly in ie 6, but not in ie7 or firefox. I have tried serveral different clearing techniques, and played around with the divs, but no success.

Code as follows:

<!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>
<title>S Smith</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
body {
background-color: #000000;
}
/*default settings*/
body {
background:#2765AF url('../images/bkgnd1.gif') repeat-x 0 0;
color:#000000;
margin:0px auto;
font-family:"Trebuchet MS", verdana, arial, "Times New Roman", serif;
font-size:90%;
}
/*structural elements*/
#container{
margin:0px auto;
text-align:center;
width:780px;
border-color: #FFFFFF;
border-left-color: #CCCCCC;
border-right-color: #CCCCCC;
border-left-style: solid;
border-top-color: #CCCCCC;
border-top-style: solid;
border-right-style: solid;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
background: #FFFFFF;
}
#navtop{
background: url('../images/navback1.jpg') no-repeat 0px 0px;
height:56px;
width:780px;
}
#navright{
float:right;
width:200px;
text-align: right;
margin-top: 25px;
font-weight: normal;
padding-right: 10px;
}
#banner{
background: url("../images/banner1.jpg") no-repeat;
float:left;
width:780px;
}
#content{
float:right;
width:420px;
padding:20px 10px 5px 10px;
line-height:160%;
margin-top:250px;
}
#quote{
float:left;
width:250px;
padding:10px 10px 5px 20px;
line-height:140%;
text-align:justify;
margin-top:200px;
}
img.floatLeft {
float: left;
margin-top: 15px;
margin-right: 20px;
}
img.floatRight {
float: right;
margin-top: 2px;
}
.quoteItem{
padding:30px 10px 5px 10px;
font-size:80%;
margin-bottom:5px;
}
#footer{
width:780px;
height:30px;
font-size:80%;
background:#DADADA;
text-align:left;
border-top:2px solid #2765AF;
border-bottom:1px solid #FFFFFF;
padding:10px 5px 5px 5px;
}
#copyright{
float:right;
}
/*headings*/
.quoteItem h1{
color:#225799;
margin:0 0 10px 0;
padding:0;
font-size:130%;
font-weight:normal;
}
#content h1{
font-size:140%;
font-weight:normal;
line-height:130%;
margin:0;
padding:0 0 20px 0;
}
/*navigation*/
#navbar {
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
font-weight:bold;
padding-top:15px;
margin-left: 0px;
}
#navbar li {
list-style:none;
display:inline;
}
#navbar a {
width:100px;
color:#333333;
text-decoration:none;
background: url("../images/homeupover1.jpg") no-repeat;
float:left;
padding:12px 0px 13px 0px;
margin-left: 0px;
text-align: center;
}
#navbar a:hover {
background-position:0 -41px;
color:#333333;
margin-left: 0px;
}
#navbar a:active {
background-position:0 -41px;
color:#CC6633;
margin-left: 0px;
}
/*begin footer*/
#footer ul {
margin:0;
padding-left: 5px;
}
#footer li {
margin:0;
list-style:none;
display:inline;
padding-left: 5px;
}
#footer a{
color:#000000;
font-weight:bold;
text-decoration:underline;
padding-left: 5px;
}
#footer a:hover{
color:#000000;
text-decoration:none;
padding-left: 5px;
}
/*EasyClearing - PIE*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block; }
/* Hide from IE Browser-Mac \*/
* html .clearfix {height:1%; }
.clearfix {display:block; }
/* End hide from IE Browser-Mac */
</style>
</head>
<body>
<div id="container">
<div class="clearfix">
<div id="navtop">
<div id="navright">PHONE: 123.456.7890</div>
<ul id="navbar">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">ACHIEVEMENTS</a></li>
<li><a href="#">EDUCATION</a></li>
<li><a href="#">CONTACT ME</a></li>
</ul>
<div id="banner">
<div id="content">
<h1>Scott, an accomplished Marketing executive in City, ...</h1>
<p>...Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br />
<br />
If your company would benefit from a results-proven, innovative thinker with
management experience in Fortune 500 companies, we should speak.</p>
<p> </p>
</div>
<div id="quote">
<div class="quoteItem">
<img src="images/quotestart1.gif" width="33" height="24" class="floatLeft" alt="** Start Quote **" />
<p>Excepteur sint occaecat cupidatat non proident. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae.
<img src="images/quoteend1.gif" width="33" height="24" class="floatRight" alt="** End Quote **" />
valuable asset for any organization in any industry
</p>
<p>A.N Other, Vice President<br />
BANK North America<br /></p>
</div>
</div>
</div>
</div>
<div id="footer">
<span id="copyright"><a href="#">S. L. Smith</a></span>
<ul>
<li><a href="#">Footer Navigation Links</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Any ideas would be appreciated - Thanks!

[edited by: SuzyUK at 8:16 am (utc) on Oct. 4, 2008]
[edit reason] examplified/shortened code & removed URI's per TOS [/edit]

works in ie6, but not firefox and ie7

Possible problem clearing, or in divs - not sure.

wilbo

D_Blackwell

wilbo

alt131

wilbo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week