Resolvi me aventurar no CSS, que estou achando o máximo, para a construção de um novo layout para um site, e no FIREFOX ele fica perfeito, mas no maldito IE fica uma m...
Já vi que vou ter que criar um código em php ou javascript pra analisar o browser do usuário pra lançar o estilo.css pra cada um, mas não sei o que estou fazendo de errado que no IE ele bagunçou tudo.
Quem estiver a fim de decifrar este "enigma" eu agradeço.
Pergunta
::..Hunter..::
Exemplo aqui
Resolvi me aventurar no CSS, que estou achando o máximo, para a construção de um novo layout para um site, e no FIREFOX ele fica perfeito, mas no maldito IE fica uma m...
Já vi que vou ter que criar um código em php ou javascript pra analisar o browser do usuário pra lançar o estilo.css pra cada um, mas não sei o que estou fazendo de errado que no IE ele bagunçou tudo.
Quem estiver a fim de decifrar este "enigma" eu agradeço.
-- CÓDIGO --
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Prefeitura de Gravatai</title>
<style type="text/css">
BODY {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #333;
background: #fff;
}
#cabecalho {
position: fixed;
width: 100%;
height: 90px;
top: 0;
right: 0;
left: 0;
bottom: auto;
background:#ffc;
}
#atalho {
position: fixed;
width: 100%;
height: 15px;
top: 91px;
right: 0;
left: 0;
bottom: auto;
background: #000;
color: #fff;
padding: 1px 0 1px 5px;
}
#menu_esquerdo {
position: fixed;
width: 150px;
height: auto;
top: 112px;
right: auto;
bottom: 0;
left: 0;
background:#fff;
border-right: 1px dashed #333;
}
#bloco_esquerdo {
display: block;
position: fixed;
width: 140px;
height: auto;
top: 113px;
right: auto;
bottom: 45px;
left: 5px;
background: #ccc;
}
#menu_direito {
position: fixed;
width: 150px;
height: auto;
top: 112px;
right: 0;
bottom: 0;
left: auto;
background:#fff;
border-left: 1px dashed #333;
}
#bloco_direito {
display: block;
position: fixed;
width: 140px;
height: auto;
top: 113px;
right: 5px;
bottom: 45px;
left: auto;
background: #ccc;
}
#meio {
position: fixed;
color: #333;
width: auto;
height: auto;
top: 112px;
right: auto;
bottom: 0;
left: 151px;
background:#fff;
border: 0 0 0 0;
}
#rodape {
text-align: center;
position: fixed;
width: 100%;
height: 40px;
border-top: 1px solid #000;
border-bottom: 0;
border-right: 0;
border-left: 0;
top: auto;
right: 0;
bottom: 0;
left: 0;
background:#fff;
font-size: 9px;
color: #333;
}
p.menu_superior {
right: 5px;
top: 66px;
position: fixed;
background: #ffc;
}
.menu_superior a {
font: 11px verdana, helvetica, sans-serif;
color: #000;
text-decoration: none;
background: #fc0;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 1px solid #000;
}
.menu_superior a:hover {
color: #fff;
background: #000;
}
.menu_superior a span {
display:none;
}
.menu_superior a:hover span {
display: block;
position: fixed;
width: 100%;
height: 15px;
top: 91px;
right: 0;
left: 0;
bottom: auto;
background: #000;
color: #fff;
padding: 1px 0 1px 5px;
text-align: left;
z-index: 100;
}
</STYLE>
</head>
<body>
<div id="cabecalho">
<p class="menu_superior">
<a href="index.php" >Home<span>Página de entrada no site</span></a>
<a href="cidade.php">A cidade<span>Conheça nossa cidade</span></a>
<a href="perfil.php">Perfil<span>Perfil sócio-econômico de Gravataí</span></a>
<a href="historia.php">História<span>O nome Gravataí, os prefeitos anteriores</span></a>
<a href="localizacao.php">Localização<span>Principais distâncias</span></a>
</p>
</div>
<div id="atalho">home</div>
<div id="menu_esquerdo">
<div id="bloco_esquerdo"></div>
</div>
<div id="meio"> nononononononon </div>
<div id="menu_direito">
<div id="bloco_direito"></div>
</div>
<div id="rodape">
Prefeitura Municipal de Gravataí<br />
Rua José Loureiro da Silva, 1350 - Centro - Gravataí<br />
CEP 94 010 000 - Rio Grande do Sul - Brasil
</div>
</body>
</html>
-- FIM DO CÓDIGO --
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.