Why Firefox shows it wrong?

ZekeLL

New Member
Hi, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com

If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text...

I am very frustrated, please help me.

Here's the code for the HTML:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
	text-align: center;
	margin: 0;
	background-color: #9e0b0f;
	background-image: url(images/back.jpg);
	background-repeat: repeat-x;
}
</style>

</head>

<body>
<div class="div-header"></div>
<div class="div-middle">
<div class="div-logo">

    <p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p>
    <p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br />
        <img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br />
        <img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br />
        <img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p>
  </div>
  <div class="div-text">
    <p>The Outsourcing Company is your business partner for:</p>

    <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br />

    <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p>
    <p>We have two goals:</p>
    <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p>
  </div>

</div>
<div class="div-footer"></div>
</body>
</html>


And this is the CSS:

Code:
.div-header {
	background-image: url(images/header-blank.jpg);
	background-repeat: no-repeat;
	margin: auto;
	height: 164px;
	width: 800px;
}
.div-footer {
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	margin: auto;
	height: 48px;
	width: 800px;
}
.div-logo {
	height: 55px;
	width: 193px;
	margin-left: 40px;
	text-align: right;
	float: left;
	margin-top: -120px;
}
.div-text {
	float: left;
	text-align: left;
	width: 485px;
	padding-left: 30px;
	font-family: "Myriad Pro";
	font-size: 13px;
	margin-top: -108px;
}
.div-middle {
	background-image: url(images/middle.jpg);
	background-repeat: repeat-y;
	margin: auto;
	width: 800px;
	height: 1000px;
}
 
Top