Please could someone help me out!!

The site works fine in IE.

In FireFox 3 the menu looks wrong, the text in the body is not centered at the top aswell??

 

Can some one tell me why and how to fix this?

Im guessing it has something to do with the PX sizes of the DIV's????

 

cheers

HTML

 

<!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"/>
<link rel="stylesheet" type="text/css" href="index/indexcss.css" title="stylesheet"/>

<title>Allen Fencing and Landscaping - South Wales</title></head>


<body>

<div id="wrapper">

<div id="header">

</div>




 <div id="menu">
   <div class="menu ul">
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
  </div>



       <div class="clearfix"></div>
 </div>

 <div id="body">


<p class="first">COMMERCIAL and DOMESTIC - ESTABLISHED OVER 15 YEARS<br/>

FENCING SPECIALISTS For QUALITY</p> 

<p>Custom made timber fencing, gates and decking supplied and erected at competitive prices.</p>


<img align="left" alt="Fence" height="270" width="300" border="1" src="pics/fence1.jpg"></img>
<img align="right" alt="Fence" height="270" width="300" border="1" src="pics/fence2.jpg"></img>
<p>All of our timber is treated.</p>


<p>Concrete Or Timber Posts<br/>
Variety Of Fixings Available<br/>
Timber, Chainlink, Concrete,<br/> Steel Palisade Fencing.<br/>
Gates made to customers specifications</p>

<p>We provide free site surveys and quotations for both private and commercial enquiries.<br/>

<a href="contactus.html">Call us</a> now to arrange a FREE no obligation survey and quotation.</p>



 </div>











<div id="footer">
  © All content copyright Allen Fencing and Landscaping 2008.
</div>

</div>

</body>

</html>

 

CSS

body {
     text-align:center;
     font-family:arial;
     font-size:20px;
     }

#body a {      
        color:brown;
       }

#body a:hover {
              color:#b5e572;
             }
p.first {
        font-size:25px;
        font-weight:bold;
       }


H1 {
   font-size:40px;
   color:blue;
   text-align:left;
  }

H3 {
   font-size:25px; 
  }

#wrapper {
         margin:0 auto;
         /*border:1px solid black;*/

         width:900px;
         /*height:600px;*/
        }

#header {
        height:100px;
        width:900px;
        background-image:url(header2.png);
        background-repeat:no-repeat;
       }

#menu {
     background-color:#b5e572;
     height:43px;
     border-top:5px solid brown;
     border-bottom:3px solid #ffffff;
     }

#menu ul {
         list-style-type:none;
         float:left;
        }

#menu ul li {
           float:left;
           }

#menu ul li a {
              text-decoration:none;
              float:left;
              padding:10px;
              color:#FFFFFF;
              border-bottom:3px solid #ffffff;
             }

#menu ul li a:hover {
                    border-bottom:3px solid brown;
                    color:brown;
                   }


.clearfix {
          clear:both;

         }


#body {
      height:500px;
      background-image:url("gradient.png");
      background-repeat:repeat-x;
     }

#footer {
        font-size:15px;
        height:20px;
        background-color:#b5e572;
        border-top:5px solid brown;
       }

Please could someone help me out!!

The site works fine in IE.

In FireFox 3 the menu looks wrong, the text in the body is not centered at the top aswell??

 

Can some one tell me why and how to fix this?

Im guessing it has something to do with the PX sizes of the DIV's????

 

cheers

HTML

 

<!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"/>
<link rel="stylesheet" type="text/css" href="index/indexcss.css" title="stylesheet"/>

<title>Allen Fencing and Landscaping - South Wales</title></head>


<body>

<div id="wrapper">

<div id="header">

</div>




 <div id="menu">
   <div class="menu ul">
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
  </div>



       <div class="clearfix"></div>
 </div>

 <div id="body">


<p class="first">COMMERCIAL and DOMESTIC - ESTABLISHED OVER 15 YEARS<br/>

FENCING SPECIALISTS For QUALITY</p> 

<p>Custom made timber fencing, gates and decking supplied and erected at competitive prices.</p>


<img align="left" alt="Fence" height="270" width="300" border="1" src="pics/fence1.jpg"></img>
<img align="right" alt="Fence" height="270" width="300" border="1" src="pics/fence2.jpg"></img>
<p>All of our timber is treated.</p>


<p>Concrete Or Timber Posts<br/>
Variety Of Fixings Available<br/>
Timber, Chainlink, Concrete,<br/> Steel Palisade Fencing.<br/>
Gates made to customers specifications</p>

<p>We provide free site surveys and quotations for both private and commercial enquiries.<br/>

<a href="contactus.html">Call us</a> now to arrange a FREE no obligation survey and quotation.</p>



 </div>











<div id="footer">
  © All content copyright Allen Fencing and Landscaping 2008.
</div>

</div>

</body>

</html>

 

CSS

body {
     text-align:center;
     font-family:arial;
     font-size:20px;
     }

#body a {      
        color:brown;
       }

#body a:hover {
              color:#b5e572;
             }
p.first {
        font-size:25px;
        font-weight:bold;
       }


H1 {
   font-size:40px;
   color:blue;
   text-align:left;
  }

H3 {
   font-size:25px; 
  }

#wrapper {
         margin:0 auto;
         /*border:1px solid black;*/

         width:900px;
         /*height:600px;*/
        }

#header {
        height:100px;
        width:900px;
        background-image:url(header2.png);
        background-repeat:no-repeat;
       }

#menu {
     background-color:#b5e572;
     height:43px;
     border-top:5px solid brown;
     border-bottom:3px solid #ffffff;
     }

#menu ul {
         list-style-type:none;
         float:left;
        }

#menu ul li {
           float:left;
           }

#menu ul li a {
              text-decoration:none;
              float:left;
              padding:10px;
              color:#FFFFFF;
              border-bottom:3px solid #ffffff;
             }

#menu ul li a:hover {
                    border-bottom:3px solid brown;
                    color:brown;
                   }


.clearfix {
          clear:both;

         }


#body {
      height:500px;
      background-image:url("gradient.png");
      background-repeat:repeat-x;
     }

#footer {
        font-size:15px;
        height:20px;
        background-color:#b5e572;
        border-top:5px solid brown;
       }

 

hi try setting the padding and margins to 0 in the body tag and also the #menu ul see if that will help ff and ie view paddig and margins differently

hi try setting the padding and margins to 0 in the body tag and also the #menu ul see if that will help ff and ie view paddig and margins differently

ELITE - You solved it for me cheers!! i cant wait til i fully learnt this CSS cuz when i get stick its so frustrating !!

thanks again

It might be best practice to reset all borders, margins and padding on everything before you begin.

i have a good book i can recommend for you

 

 

http://www.amazon.co.uk/s/?ie=UTF8&key...sl_8a09ky2hae_e

 

i am sure tere other good books and good book sellers out there but this is were i bought mine from and i find it very usefull