Probleme de css pour mozilla firfox

Bonjour,


Bonjour,
j ai crée un site web avec des pages html et une de css. tout va bien mais le probleme c est que le site ne s'affiche pas proprement sur mozilla firfox et google chrome. il s'affiche bien seulment sur internet explorer.quoi faire .... et merci pour votre aide

voici la page css


html {
height: 100%;
}

* {
margin: 0;
padding: 0;
}

a {
color: #60c020;
text-decoration: none;
outline: none;
}

a:hover {
color: #00a000;
text-decoration: none;
}

p {
margin-bottom: 6px;
}

blockquote {
text-align: right;
font-style: italic;
padding: 6px 20px 6px 30px;
background: url(images/quote.jpg) left top no-repeat;
}

.left {
float: left;
margin: 2px 8px 0px 0px;
border: 1px solid #A8CE32;
}

.right {
float: right;
margin: 2px 0px 0px 8px;
border: 1px solid #A8CE32;
}

.center {
display: block;
text-align: center;
margin: 2px auto 2px;
border: 1px solid #A8CE32;
}

body {
font: 17px Arabeyes ;
color: #002000;
background: #DCDCDC;
margin: 0;
padding: 0;
}

#header {
margin-top: 20px;
padding: 0 40px 0px 40px;
background: #DCDCDC url(images/tops.png) right bottom no-repeat;
height: 194px;
}

#wrapper {
width: 964px;
margin: 0 auto 0 auto;
background: url(images/bg.png) right repeat-y;
padding: 0;
}

#toplinks {
text-align: right;
font-weight: 400;
font-size: .8em;
letter-spacing: .1em;
text-transform: uppercase;
}

#toplinks a {
color: #d37103;
text-decoration: none;
font-weight: 600;
}

#title {
margin: 74px 210px 0 270px;
}

#title h1, #title h1 a {
/* color: #D0FFD0; */
color: #fff;
text-decoration: none;
letter-spacing: .16em;
font-size: 1.7em;
/* display: inline; */
}

#title h2 {
color: #FFFFc0;
letter-spacing: .1em;
margin: 6px 0 0 2px;
}

#menu {
background: #000000;
height: 38px;
margin-left: 9px;
margin-right: 7px;
border-bottom: 3px solid #B4B300;
}

#menu ul {
padding-top: 10px;
padding-left: 20px;
}

#menu li {
list-style: none;
display: inline;
}

#menu li a {
padding: 6px 14px 7px 14px;
line-height: 26px;
height: 30px;
text-decoration: none;
color: #FDFFE1;
background: #606060;
border-right: 3px solid #000;
border-left: 3px solid #000;
}

#menu li a:hover, #menu li a.selected {
line-height: 26px;
padding-top: 8px;
background: #FDFFE1;
color: #003000;
border-top: 3px solid #B4B300;
border-right: 3px solid #B4B300;
border-left: 3px solid #B4B300;
border-bottom: 3px solid #FDFFE1;
}

#content {
padding: 20px 30px 30px 30px;
color: #003000;
}

#content h2, #content h3 {
color: #805000;
margin: 6px 0 8px;
border-bottom: 2px solid #B4B300;
text-align:right;
}
#content h4 {
color: #805000;

background:#000000;


}

#main {
width: 644px;
float: left;
margin-bottom: 10px;
}

#main fieldset {
border: 2px solid #B4B300;
background: #fffff0;
margin: 16px auto 16px;
padding: 14px;
width: 370px;
}

#main textarea, #main input {
overflow: auto;
width: 200px;
margin: 2px;
}

div.row {
width: 360px;
}

div.row span.formlabel {
float: left;
width: 150px;
text-align: left;
}

div.row span.forminput {
width: 180px;
text-align: right;
}

.submit {
font-family: verdana, arial, sans-serif;
font-size: 100%;
border: 1px solid;
width: 70px;
height: 22px;
cursor: pointer;
}

.column {
float: right;
width: 300px;
background: #fffff0;
margin: 0 5px 10px 5px;
border-right: 2px solid #B4B300;
border-left: 2px solid #B4B300;
border-bottom: 2px solid #B4B300;
padding-bottom: 10px;
}

#main .column h3 {
background: #805000;
text-align: center;
color: #fff;
margin-top: 0;
padding: 4px 0 4px 0;
}

.column p, .column h4 {
padding: 8px;
}

#main ul {
margin-left: 26px;
margin-bottom: 8px;
}

table {
border-collapse: collapse;
margin: 10px auto 15px auto;
border: 2px solid #B4B300;
}

th {
background: #FF3300;
height: 25px;
padding: 0 10px;
color: #ffffff;
text-align: right;
}

td {
padding: 0 10px;
height: 25px;
}

tr.odd {
background: #fffff0;
}

tr.even {
background: #f0f0f0;
}

#right {
padding: 0px 0 20px;
width: 242px;
float: right;
background: #fffff0;
border: 2px solid #B4B300;
/* border: 2px solid #A8CE32; */
}

#right h2 {
padding: 12px 0 8px 10px;
text-align:right;
}

#right h3 {
margin-top: 6px;
text-align:right;
}

#right ul {
/* border-top: 1px solid; */
margin: 4px 0 6px;

}

#right li {
list-style: none;
display: block;
padding: 4px 0 2px;
border-bottom: 1px solid;
}

#right li a {
color: #805000;
background: url(images/seta1.png) left no-repeat;
padding-left: 10px;
}

#right li a:hover, #right li a.selected {
background: url(images/seta.png) left no-repeat;
padding-left: 15px;
color: #d37103;
}

.rightitem {
padding: 0 6px 0 10px;
margin-bottom: 8px;
}

#postit {
width: 216px;
height: 216px;
float: right;
margin-top: 26px;
padding: 40px 12px 12px 16px;
background: url(images/postit.png) no-repeat;
color: #fff;
}

#postit h3 {
text-align: left;
color: #000;
border: none;
}

#footer {
height: 57px;
background: url(images/bottom.png) right no-repeat;
padding-left: 50px;
padding-top: 20px;
}

#footer p {
color: #d0FFc0;
text-align: center;
}

.clear {
clear: both;
}

.clearbottom {
clear: both;
margin: 0 8px 0 10px;
border-bottom: 3px solid #B4B300;
}

div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 3px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 200px;
margin: 2px;
}

b {
color:#0000cc;
font-style: italic;
font-size: 0.8em;}
b.even {color:#000000;
font-size:30px;
float:up;
}
h1 {color:#CB0C26;
font-style: italic;
font-size: 1.3em;
background:#0CFAF6;}
b {
color:#FF0000;
font-style: italic;
font-size: 0.8em;}

et voici la page html correspondante
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<title>ASSOCIATION FORUM DES JEUNES DE TAMASSINT</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style00.css" />
<head>
<script type="text/javascript">
function blinking_header()
{
if (!document.getElementById('blink').style.color)
{
document.getElementById('blink').style.color="white";
}
if (document.getElementById('blink').style.color=="red")
{
document.getElementById('blink').style.color="white";
}
else
{
document.getElementById('blink').style.color="red";
}
timer=setTimeout("blinking_header()",200);
}

function stoptimer()
{
clearTimeout(timer);
}
</script
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="toplinks">
<a href="#">????? ????? ???? ???????</a>
</div>
<div id="title">
<h2 style="text-align: center;"align="center"><font color="white"> <marquee behavior="alternate"scrollamount="2">????? ????? ???? ???????</a></marquee></h2>

<h2>????? ???????? ?????? ?????????</h2>
</div>
</div>
<div id="menu">
<ul>
<li><a class="selected" href="index.html#index">????????</a></li>
<li><a target="_blank" href="groupe.htm#groupe">?????????</a></li>
<li><a href="prog.htm#prog">?????? ??????</a></li>
<li><a href="result.htm#result">???????</a></li>
<li><a href="video.htm#video">?????? </a></li>
<li><a href="album.htm#album">????? ?????</a></li>
</ul>
</div>
<div id="content">
<div id="main">
<body onload="blinking_header()" onunload="stoptimer()">
<center><h4 id="blink">?????? ?? ????? ???????? ?? ?????? ?? ???? ??? ?????? ??? ???? ??? ???????? ? 10 ????? </h4> </center></body>

<h2>???? ?? ??? ????? ???????</h2>
<p style="text-align:right;">?? ???? ??????? ????????? ????? ????? ????? ???? ??????? ???? ?? ??? ????? ??????? ?????? ???? ????? ??????? ???? ??? ????? ??????? .? ?????? ??????? ?? ????? ????? ????????? ??????? ????? ??? ?????? ??? ????? ??? ??????? ??? ???????? ?????? ?????? ? ???? ????? ?????? </p>
<blockquote><b></b></blockquote>
<div class="column"><h3>???? ??????? </h3>
<p><img src="images/star.jpg" alt="ASSOCIATION FORUM DES JEUNES DE TAMASSINT" width="280" height="330"/></p>
</div>
<div class="column">
<h3>???? ?? ???????</h3>

<p><img src="images/public4.jpg" alt="ASSOCIATION FORUM DES JEUNES DE TAMASSINT" width="280" height="330"/></p>
</div>



<div class="clear"></div>
</br>

<center><p><img src="images/public.jpg" alt="ASSOCIATION FORUM DES JEUNES DE TAMASSINT" width="500" height="430"/></p></center>

<p></p>
</div>
<div id="right">
<h2>???????</h2>
<div class="rightitem">
<ul>
<li><a class="selected" href="index.html#index">????????</a></li>
<li><a target="_blank" href="groupe.htm#groupe">?????????</a></li>
<li><a href="prog.htm#prog">?????? ??????</a></li>
<li><a href="result.htm#result">???????</a></li>
<li><a href="video.htm#video">?????? </a></li>
<li><a href="album.htm#album">????? ?????</a></li>
</ul>
</div>
<h2>??? ???????</h2>
<div class="rightitem">
<marquee behavior="scroll" marque direction="up" scrollamount="1"onmouseover="this.stop();" onmouseout="this.start();"><b>
??? ????? ???? ?? ?????? ?????? ???? ??? ?????? ??? ????? ?? ???????? ?? ??????? ????? ??????? ????
</b></marquee>

</div>
<!-- <div class="leftbottom"></div> -->
</div>
<div id="postit">
<h3>Contact:</h3>
<p>ASSOCIATION FORUM DES JEUNES DE TAMASSINT</p><p>TAMASSINT CENTRE</p><p>IMRABTEN</p><p>Tel:00212539819286</p><p>http://www.imrabten.be.ma</p>
</div>
</div>
<div class="clearbottom"></div>
<div id="footer">
<p>Copyright © 2011 ASSOCIATION FORUM DES JEUNES DE TAMASSINT- All rights reserved | Design by EL HAMDAOUI</p>

</div>