Problema com o site/mozilla

paulochagass · Novembro 13, 2011

Estou com problemas na vizualização de minha pagina no Mozilla, no Google Chrome ela está perfeitamente do jeito que projetei, mas no Mozilla aparece tudo fora do lugar... Simplesmente o meu código CSS não se aplica a pagina.

Aqui o codigo Html de meu site:

<!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>Vrum Download</title>
<link rel="stylesheet" type="text\css" href="estilo.css">
</head>
<body>
<div id="topo">
<a href="#"><img src="imagens/logo.gif" id="logo"></a>
<img src="imagens/busca.gif" id="busca">
<p id="forum"><a href="#" class="class1">Forum</a></p>
<p id="suporte"><a href="#" class="class1">Suporte</a></p>
</div>
<div id="menu">
<p id="botoes">Home Programas Games Anuncie Contato</p>
</div>
<hr id="divisor">
</body>
</html>

Aqui o codigo css do site:

body {font-family: Tahoma, verdana;
      background-color: #FFF;
      margin-left:-8px;
      margin-top:-8px;}
/* Daqui começa as regras para algumas tags. ex:p, hr, b.*/
p {font-size:14px;
   font-weight:bold;}
a.class1:link, a.class1:visited {text-decoration: none;
                                 color:#000}
a.class1:hover {text-decoration:none;
                color: #F22}
/*tudo que estiver entre topo e menu faz parte do topo*/
#topo {position:relative;
       background-color: #FFF;
       width:1368;
       height:115px;}
#logo {position:absolute;
       margin-top:20px;
       left:175px;}
#busca {position: relative;
        left:500px;
        top:50px;}
#forum {
    position:absolute;
    right:175px;
    top:43px;
    font-weight:bold;
}
#suporte {
    position:absolute;
    right:300px;
    top:43px;
    font-weight:bold;
}
#menu {position:relative;
       width:1368px;
       heigth:auto;
       top:-14px;
       background-color:#FE8340;
       word-spacing:30px;
       text-align:center;}
#divisor {position:absolute;
          right:375px;
          height:100%;}

Aqui as imagens de como fica Google Chrome e Mozilla:

Google Chrome:

Mozilla:

Por favor me ajudem!

Editado Novembro 13, 2011 por paulochagass

Andre_Luiz · Novembro 29, 2011

paulochagass disse:

Estou com problemas na vizualização de minha pagina no Mozilla, no Google Chrome ela está perfeitamente do jeito que projetei, mas no Mozilla aparece tudo fora do lugar... Simplesmente o meu código CSS não se aplica a pagina.

Aqui o codigo Html de meu site:

<!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>Vrum Download</title>
<link rel="stylesheet" type="text\css" href="estilo.css">
</head>
<body>
<div id="topo">
<a href="#"><img src="imagens/logo.gif" id="logo"></a>
<img src="imagens/busca.gif" id="busca">
<p id="forum"><a href="#" class="class1">Forum</a></p>
<p id="suporte"><a href="#" class="class1">Suporte</a></p>
</div>
<div id="menu">
<p id="botoes">Home Programas Games Anuncie Contato</p>
</div>
<hr id="divisor">
</body>
</html>

Aqui o codigo css do site:

body {font-family: Tahoma, verdana;
      background-color: #FFF;
      margin-left:-8px;
      margin-top:-8px;}
/* Daqui começa as regras para algumas tags. ex:p, hr, b.*/
p {font-size:14px;
   font-weight:bold;}
a.class1:link, a.class1:visited {text-decoration: none;
                                 color:#000}
a.class1:hover {text-decoration:none;
                color: #F22}
/*tudo que estiver entre topo e menu faz parte do topo*/
#topo {position:relative;
       background-color: #FFF;
       width:1368;
       height:115px;}
#logo {position:absolute;
       margin-top:20px;
       left:175px;}
#busca {position: relative;
        left:500px;
        top:50px;}
#forum {
    position:absolute;
    right:175px;
    top:43px;
    font-weight:bold;
}
#suporte {
    position:absolute;
    right:300px;
    top:43px;
    font-weight:bold;
}
#menu {position:relative;
       width:1368px;
       heigth:auto;
       top:-14px;
       background-color:#FE8340;
       word-spacing:30px;
       text-align:center;}
#divisor {position:absolute;
          right:375px;
          height:100%;}

Aqui as imagens de como fica Google Chrome e Mozilla:

Google Chrome:

Mozilla:

Por favor me ajudem!

Olá!

Testei teu código no Chrome e no Firefox e funcionou perfeitamente.

Contudo existe uma boa forma de programar, e sugiro que a implemente no seu código, já que fica mais legível, mas adaptável e os navegadores podem entender com mais facilidade às tags do CSS.

Abraços.

Entrar

Problema com o site/mozilla

Pergunta

paulochagass

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Andre_Luiz

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades