css interpretado diferente por firefox e explore

[fabio.desgin]

     Estou tento problemas com meu código css, no meu pc quando testo o site tanto no firefox quanto no explore eles
funcionam normalmente, nao há diferença, o problema acontece quando envio ao servidor, e quando teste

novamente eles, da pau no explore, a pagina nao centraliza, ja fiz de tudo mais deu  em nada.

quem tiver os dois navegadores, e abrir nele perceberam o problema que estou tendo.

  Quem souber como resolver esse problema, agradeço desde já, ai vai o link do site

http://www.gratisweb.com/testek21/

código css

/* CSS Document */

body {
   margin:0;
   padding:0;
   font-size:11px;
   line-height:16px;
   font-family: Arial, Tahoma;
   text-align: center;
}
a { color:#fe5800;}
a:hover { text-decoration:none;}
.orange { color:#fe5800;}

#header {
   height:210px;
   background-image: url(images/header_bckg.gif);
   background-repeat: repeat-x;
   background-color: #FFFFFF;
   position: relative;
}
#logo {
   width:780px;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   padding-top: 33px;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 20px;
   text-align: left;
}
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}
#logo a:hover { }
#menu {
   color:#fff;
   text-align:center;
   margin-top:15px;
   position: relative;
}
#menu ul{ width:780px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { display:block; float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; background:url(images/menu_enactive.gif) no-repeat bottom center; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase;}
#menu ul a:hover { background:url(images/menu_over.gif) no-repeat bottom center; color:#232323;}
#menu ul a.active { background:url(images/menu_active.gif) no-repeat bottom center; color:#232323;}
#menu ul a.active:hover { background:url(images/menu_active.gif) no-repeat bottom center; color:#232323;}

#main {
   float: left;
   width: 100%;
   margin:20px 0 20px 0;
}
#head_image {
   height:150px;
   padding:30px 0 30px 50px;
   line-height:24px;
   text-align: left;
   background-color: #fe5d00;
   background-image: url(images/head_bckg.jpg);
   background-repeat: repeat-x;
}
#slogan { color:#fff; font-family: "Arial Narrow", Arial, Tahoma; font-size:21px; text-transform:uppercase; }
#under_slogan_text { color:#000000; font-size:12px; line-height:12px; padding-top:15px;}
#content {
   width:780px;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   text-align: left;
}
#content h1 { margin:20px 0 0 0; text-transform:uppercase; font-size:20px; color:#000; font-weight:normal;}
#text {float:left; width:530px; padding-left:20px;}
#sidebar {
   background:url(images/sidebar_bckg.gif) repeat-x;
   color:#6f6e6e;
   padding:20px;
   margin-right: 0;
   margin-bottom: 0;
}
#sidebar h2 {color:#fe5800; margin:0 0 15px 0; font-size:14px; font-weight:bold; text-transform:uppercase;}

#footer {background:url(images/footer_bckg.gif) repeat-x #3f3e3e 0 2px; height:94px; margin-top:20px; clear:both;}
#left_footer { float:left; padding:40px 0 0 30px; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px;}
#left_footer a { color:#FFFFFF;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px; text-align:right;}
#right_footer a { color:#FFFFFF;}
#right_footer a:hover { text-decoration:none;}
#lkpeças {
   height: 150px;
   width: 500px;
   background-color: #FFFFFF;
   margin-right: auto;
   margin-left: auto;
}
#lkpeças #cont {
   height: 130px;
   width: 180px;
   margin-top: 5px;
   float: left;
   border: 1px solid #CCCCCC;
   margin-left: 38px;
   background-color: #CCCCCC;
}
.prod {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: small;
   font-weight: bold;
   color: #FF6600;
   text-align: center;
   font-variant: small-caps;
   font-style: italic;
   padding: 5px;
}
#contpcs {
   float: left;
   height: 175px;
   width: 140px;
   margin-right: 15px;
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: #CCCCCC;
   margin-bottom: 25px;
}
#contpcs a {
   text-decoration: none;
   color: #333333;
}

.pcs {
   font-family: tahoma, arial;
   font-size: 14px;
   font-weight: bold;
   color: #464545;
   text-transform: capitalize;
   text-align: center;
}
#submenu {
   width: 780px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #FC7300;
   margin-bottom: 50px;
   padding: 0px;
   height: 24px;
}
#submenu ul {
   height: 10px;
   padding: 0px;
   margin-top: 4px;
   margin-bottom: 4px;
   margin-left: 1px;
}
#submenu ul a:hover {
   color: #999999;
   text-decoration: underline;
}

#submenu li {
   display: inline;
}
#submenu a {
   font-family: tahoma, arial;
   text-transform: uppercase;
   color: #333333;
   font-weight: bold;
   font-size: 9px;
   text-decoration: none;
}
#subtop {
   height: 210px;
   width: 780px;
   background-image: url(images/head_bckg.jpg);
}

[Nuno]

O teu css não está muito bem escrito...

O teu header devia ter medidas fixas por ex:

width:800px;
margin:0 auto; <- para centrares na horizontal

Experimenta meteres

#main {
margin:0 auto;
width:900px;
margin:20px 0 20px 0;
}

[fabio.desgin]

  fala nuno, valeu pela ajuda, realmente o problema se encontrava na div main, determinei uma largura

para ela e tirei o flutuamento a direita, e finalmente a pagina centralizou no meio. impressionante como um detalher pode da tanta dor cabeça, cheguei fazer  a loucura de recriar o layout passo a passo para encontrar o problema..rsrs flw

[Nuno]

Qualquer dúvida deixa ai que a malta tenta ajudar ;)

[emil]

Qualquer dúvida deixa ai que a malta tenta ajudar ;)

Cara, estou com um problema parecido .. no firefox o background fica em uma posição e no explorer de outra .. segue codigo abaixo...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title></title>
  <style type="text/css">

body {margin: 0 auto;}

#topo2 { position:absolute; top:21px; left:700px; width:580px; height:88px; text-align:center;}
#topo { position:absolute; top:21px; left:0px; width:100%; height:88px; text-align:center;
}
#menu { position:absolute; top:125px; left:0px; width:268px; height:1435px; text-align:center;
}
#geral { position:absolute; top:125px; left:268px; width:900px; height:1445px;  margin-top:0px; text-align:center;
}
#logo { position:absolute; top:8px; left:52px; width:228px; height:75px; mtext-align:center;
}
#menudia { position:absolute; top:159px; left:40px; width:228px; height:50px; text-align:center;
}
#menudiafundo { position:absolute; top:145px; left:40px; width:228px; height:50px; text-align:center;
}
#menuant { position:absolute; top:207px; left:40px; width:228px; height:50px; text-align:center;
}
#menuantfundo { position:absolute; top:207px; left:40px; width:228px; height:50px;  text-align:center;
}
#menufunc { position:absolute; top:269px; left:40px; width:228px; height:50px; text-align:center;
}
#menufuncfundo { position:absolute; top:269px; left:40px; width:228px; height:50px; text-align:center;
}
#titulo { position:absolute; top:135px; left:295px; width:850px; height:96px; mtext-align:left;
}
#produto { position:absolute; top:245px; left:614px; width:555px; height:338px; text-align:center;
}
#de { position:absolute; top:245px; left:268px; width:348px; height:57px; text-align:center;
}
#por { position:absolute; top:301px; left:268px; width:348px; height:81px; text-align:center;
}
#por2 { position:absolute; top:301px; left:268px; width:348px; height:81px; text-align:center;
}
#comprar { position:absolute; top:415px; left:365px; width:169px; height:76px; text-align:center;
}
#desconto { position:absolute; top:521px; left:285px; width:65px; height:43px; text-align:center;
}
#restante { position:absolute; top:521px; left:355px; width:65px; height:43px; text-align:center;
}
#vendido { position:absolute; top:521px; left:427px; width:65px; height:43px; text-align:center;
}
#destaque { position:absolute; top:612px; left:300px; background-color: rgb(239, 238, 238); width:350px; height:340px; text-align:left;
}
#destaque2 { position:absolute; top:630px; left:310px; width:350px; height:300px; line-height:30px; margin-left:0px; margin-top:0px; text-align:left;
}
#regulamento { position:absolute; top:612px; left:718px; background-color: rgb(239, 238, 238); width:390px; height:340px; text-align:left;
}
#regulamento2 { position:absolute; top:630px; left:728px; width:380px; height:300px; line-height:30px;  text-align:left;
}
#barradir { position:absolute; top:125px; left:0px; width:100%; height:1427px; text-align:center;
}
#barradir2 { position:absolute; top:125px; left:1175px; width:105px; height:1427px; text-align:center;
}
#barrainf { position:absolute; top:1628px; left:267px; width:907; height:50px; text-align:center;
}
#barrainfundo { position:absolute; top:1550px; left:0px; width:100%; height:128px; text-align:center;
}
#barrainfundo2 { position:absolute; top:1550px; left:700px; width:580px; height:128px; margin: auto; text-align:center;
}
#aba { position:absolute; top:125px; left:1175px; width:42px; height:105px; margin-left:0px; margin-top:0px; text-align:center;
}
#facebook { position:absolute; top:125px; left:1168px; width:42px; height:35px; margin-left:0px; margin-top:0px; text-align:center;
}
#orkut { position:absolute; top:160px; left:1168px; width:42px; height:35px; margin-left:0px; margin-top:0px; text-align:center;
}
#twt { position:absolute; top:195px; left:1168px; width:42px; height:35px; margin-left:0px; margin-top:0px; text-align:center;
}
#endereco { position:absolute; top:1057px; left:300px; background-color: rgb(239, 238, 238); width:300px; height:400px; text-align:left;
}
#endereco2 { position:absolute; top:1200px; left:300px; width:300px; height:360px; margin-left:0px; margin-top:0px; text-align:left;
}
#empresa { position:absolute; top:1057px; left:673px; background-color: rgb(239, 238, 238); width:435px; height:400px; margin-left:0px; margin-top:0px; text-align:left;
}
#empresa2 { position:absolute; top:1200px; left:623px; width:435px; height:400px; margin-left:0px; margin-top:0px; text-align:left;
}
#mydiv{ padding: 15px;
}
#mapa { position:absolute; top:1250px; left:300px; width:300px; height:300px; margin-left:0px; margin-top:0px; text-align:left;
}
#PAS1z {  margin-bottom: 0em; letter-spacing: 0em; line-height: 1.7em;
}
#espaco { margin-top:15px
}

  </style>
  <style>
         a:link {text-decoration: none; color:#666666;}
         a:visited {text-decoration: none; color:#666666;}
         a:hover {text-decoration: none; color:#FF6600;}
         a:active {text-decoration: none; color:#ff9900;}
  </style>
</head>

<body style="height: 200px;">

<div style="text-align: center; background-color: rgb(231, 120, 23); height: 98px;" id="topo2"></div>

<div style="text-align: center; background-color: rgb(231, 120, 23); height: 98px;" id="topo">
<div id="logo"><img style="width: 228px; height: 75px;" alt="carregando..." src="topo_logo_novo.jpg"></div>

</div>

<div style="text-align: center; background-color: rgb(204, 204, 204); height: 1435px;" id="barradir"></div>

<div style="text-align: center; background-color: rgb(204, 204, 204); height: 1435px;" id="barradir2"></div>

<div style="background-color: rgb(204, 204, 204);" id="menu"></div>

<div style="background-color: rgb(255, 255, 255); top:125px; left:268px; width:900px; height:1445px;" id="geral"></div>

<div id="titulo"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(31, 26, 23); font-family: Arial; font-size: 28px;"><b style="font-weight: 700;">50% de desconto. Acelere fundo
nessa promo&ccedil;&atilde;o.


Oportunidade &uacute;nica, de correr em uma bateria de kart de 10


minutos no em Foz do Igua&ccedil;u.</span></span></div>

<div id="de">
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><img src="imagens/preco_de.gif" alt="preco_de.gif" align="left" border="0" height="57" width="348"></span></div>

<div id="por"></div>

<div id="por2"><img style="" carregando="" src="imagens/preco_por.jpg">
</div>

<div id="produto">
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><img style="width: 553px; height: 338px;" alt="Adrena Kart" src="imagens/50_kart_foz.gif">


</span></div>

<div id="comprar"><img style="width: 169px; height: 76px;" alt="carregando..." src="imagens/btw_branco.png" onmouseover="this.src='imagens/btw_preto.png'" onmouseout="this.src='imagens/btw_branco.png'" onclick="location='http://www.facebook.com/#!/profile.php?id=100001740906270'"></div>

<div id="desconto"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"></span></div>

<div id="restante"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"></span></div>

<div id="vendido"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"></span></div>

<div style="color: rgb(57, 57, 57); padding:15px;" id="destaque" id="mydiv"><span style="font-weight: bold;">Destaques
</span>

<span style="color: rgb(57, 57, 57); font-weight: bold;"><span style="font-weight: 100;">

<ul><div id="PAS1z">

  <li> Pista de Kart Profissional (ao ar livre).</li>

  <li>Aproveite uma bateria de Kart de 10 minutos de R$40,00 por apenas R$20,00.</li>

  <li>50% de desconto.</li>

  <li>Equipamentos seguros e de qualidade.</li>

  <li>Mec&acirc;nicos especializados.</li>

  <li>Karts de 8.0 HP.</li>

  <li>Prepare os motores, pois adrenalina vai subir.</li>

  <li>Apertem os cintos! Pois agora a adrenalina vai come&ccedil;ar!</li>

</div></ul>

</span></span></div>

<div style="color: rgb(57, 57, 57); padding:15px;"  id="regulamento" id="mydiv"><span style="font-weight: bold;">Condi&ccedil;&otilde;es</span>
<span style="color: rgb(57, 57, 57); font-weight: bold;"><span style="font-weight: 100;">

<ul><div id="PAS1z">

  <li>Cupom v&aacute;lido de 21/12/2010 a 21/01/2010.</li>

  <li>Promo&ccedil;&atilde;o v&aacute;lida apenas de ter&ccedil;a &agrave; sexta, das 17:00 &agrave;s 23:00.</li>
 
  <li>Limite de 09 cupons por pessoa (Ex: voc&ecirc; pode comprar 2 cupons e correr 20 minutos, de acordo com a disponibilidade).</li>

  <li>Ser&#225; enviado um link de confirma&#231;&#227;o para seu email. Sua reserva ser&#225; efetuada somente ap&#243;s a confirma&#231;&#227;o.

  <li>Reserve seu hor&aacute;rio pelo telefone: (45) 3572-0022.</li>

  <li>Promo&ccedil;&atilde;o &eacute; v&aacute;lida apenas para o kart de 8.0hp.</li>

</div></ul>

</span></span></div>

<div id="aba"></div>

<div id="facebook"><img style="width: 42px; height: 35px;" alt="carregando..." src="btw_face_10%25.gif" onmouseover="this.src='btw_face_cor.gif'" onmouseout="this.src='btw_face_10%25.gif'" onclick="location='http://www.facebook.com/#!/profile.php?id=100001740906270'"></div>

<div id="orkut"><img style="width: 42px; height: 35px;" alt="carregando..." src="btw_orkut_10%25.gif" onmouseover="this.src='btw_orkut_cor.gif'" onmouseout="this.src='btw_orkut_10%25.gif'" onclick="location='http://www.orkut.com.br/Main#Profile?uid=6575570092373915213'"></div>

<div id="twt"><img style="width: 42px; height: 35px;" alt="carregando..." src="btw_twi_10%25.png" onmouseover="this.src='btw_twi_cor.png'" onmouseout="this.src='btw_twi_10%25.png'" onclick="location='http://twitter.com/soofertasfoz'"></div>

<div style="color: rgb(57, 57, 57);" id="endereco">

   <div style="padding:15px;" id="mydiv">

   <span style="font-weight: bold;">Adrena Kart</span><BR>

   [email]adrenakart@adrenakart.com.br[/email]


   Endere&ccedil;o: Heleno Schimmelpfeng, 880 - Vila Yolanda - Foz do igua&ccedil;u. Ao lado do est&aacute;dio Pedro Basso (Flamengo).


   Telefone: (45) 3572 0022


   </div>

<iframe marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=Adrena+Kart,+Foz+do+Igua%C3%A7u+-+Paran%C3%A1,+Brasil&amp;sll=-25.556363,-54.567345&amp;sspn=0.03438,0.076818&amp;ie=UTF8&amp;hq=Adrena+Kart,&amp;hnear=Foz+do+Igua%C3%A7u+-+Paran%C3%A1,+Brasil&amp;ll=-25.556363,-54.567345&amp;spn=0.020823,0.045819&amp;output=embed" frameborder="0" height="300" scrolling="no" width="300"></iframe>

</div>

<div style="color: rgb(57, 57, 57); padding:15px;" id="empresa" id="mydiv">Fazer voc&ecirc; um campe&atilde;o! Esta &eacute; a proposta do ADRENA KART um super complexo formado por:


<ul>

  <li>Pista de Kart Profissional (ao ar livre);</li>

  <li>Loca&ccedil;&atilde;o de Kart, incluindo acess&oacute;rios de seguran&ccedil;a (Capacetes, Luvas, Balaclava,...);</li>

  <li>Kart 8 HP;</li>

  <li>Vesti&aacute;rios (com arm&aacute;rio individual);</li>

  <li>Lanchonete;</li>

  <li>Escola de Kart para crian&ccedil;as a partir de 5 anos;</li>

  <li>Sala de Imprensa;</li>

  <li>Cronometragem digital;</li>

  <li>Painel Eletr&ocirc;nico.</li>

</ul>

Hor&aacute;rio de Funcionamento: Ter&ccedil;a a domingo.


Loca&ccedil;&atilde;o de Kart ( sistema indoor em pista ao ar livre c/ 770 metros) : A partir das 17h00.


Pilotos Associados / Categorias Profissionais (propriet&aacute;rios de Box) : Das 07h00 as 17h00.


</div>

<div style="background-color: rgb(204, 204, 204);" id="barrainfundo"></div>

<div style="background-color: rgb(204, 204, 204);" id="barrainfundo2"></div>

<div style="background-color: rgb(255, 102, 0);" id="barrainf"></div>

<div id="menudiafundo"><img style="width: 228px; height: 55px;" alt="carregando..." src="imagens/btw_oferdia_cor.png">
</div>

<div id="menudia">
</div>

<div id="menuantfundo">
</div>

<div id="menuant">
<img style="width: 228px; height: 55px;" alt="carregando..." src="imagens/btw_oferant_OFF.png" onmouseover="this.src='imagens/btw_oferant_cor.png'" onmouseout="this.src='imagens/btw_oferant_OFF.png'" onclick="location='ofertaanterior.php'"></div>

<div id="menufuncfundo"></div>

<div id="menufunc"><img style="width: 228px; height: 55px;" alt="carregando..." src="imagens/btw_como_OFF.png" onmouseover="this.src='imagens/btw_como_cor.png'" onmouseout="this.src='imagens/btw_como_OFF.png'" onclick="location='comofunciona.php'"></div>

</body>
</html>