Why Firefox shows it wrong?

Discussion in 'Web Design' started by ZekeLL, Sep 22, 2008.

to remove all ads.
  1. ZekeLL

    ZekeLL New Member

    Messages:
    9
    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;
    }
    
     
  2. jnjc

    jnjc New Member

    Messages:
    493
    Can you outline exactly what is wrong in FF ?
     

Share This Page