Menu no IE fica todo errado

chlins · Junho 26, 2008

Pessoal,

Preciso resolver esta questão, o menu funciona bem em qualquer navegador mas no IE6 não.

O que há de errado neste código? Que hack devo usar...?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Seripa2  Home</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="generator" content="HAPedit 3.1">
<link rel="stylesheet" href="estilo.css">
    
</head>
<body>
<div id="geral">
<div id="topo"></div>
<ul class="menu">
<li class="current"><a href="current"><b>HOME</b></a></li>
<li><a href="programacao.html"><b>Programação</b></a></li>
<li class="local.html"><a href="local.html"><b>Local</b></a></li>
<li><a href="inscricao.html"><b>INSCRIÇÃO</b></a></li>
</ul>
<div id="col_dir">
</div>
<div id="conteudo_home">
  <p class="style2">O SERIPA-2 e a FTC - Faculdade de Tecnologia e Ciências de Salvador</p>
  <p>realizarão o <strong>"FÓRUM DE SEGURANÇA DE VÔO"</strong></p>
  <p><strong>Local:</strong> AUDITÓRIO DO HOTEL SAINT LOUIS - LUIS EDUARDO MAGALHÂES - BA</p>
  <p><strong>Data:</strong> 05 DE JULHO DE 2008 - das 09 às 17h (conforme programação) </p>
</div>
<div id="rodape">© 2007 SERIPA2 - <a href="http://www.seripa2.com.br/webmail" target="_blank"> WEBMAIL</a>  -  Todos os direitos reservados - <a href="mailto:charles@chlins.com">by chlins</a></div>
</div>
<div id="w3c">
    <a href="http://jigsaw.w3.org/css-validator/">
        <img style="border:0;width:50px;height:18px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!"></a>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401-blue"
        alt="Valid HTML 4.01 Transitional" height="18" width="50">
        </a>
        
</div>

</body>
</html>

CSS

@charset "utf-8";
body {
background:url(imagens/fundo.gif);
color:#FFF;
text-align:center;
font:85% "Trebuchet MS",Arial,sans-serif;
padding:0;
}

.style2 {font-size:14px; font-weight:700; padding-top:210px;}

h1,h2,h4,p {font-weight:400; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0; padding:0 20px;}
p {padding:0 10px 10px;}
h1 {font-size:250%; color:#FFF; padding-top:5px;}
h2 {font-size:180%; line-height:1; color: #FFFF00;}
h3 {font-size:140%; line-height:1; color:#00F; padding-left:25px;}
h4 {font-size:160%; line-height:1; color: #FFF;}
h1,h2,p {font-weight:400; margin:0; padding:0 15px 10px 9px;}
marquee {color: #FFFF00;}

div#geral {
width:85%;
height:auto;
text-align:left;
background:#FFF;
margin:auto;
padding:5px;
}

div#topo {
background:url(imagens/topo.jpg);
background-repeat:no-repeat;
height:137px;
}

div#conteudo {
float: left;
width:82%;
height:300px;
background:#069;
overflow: hidden;
overflow-x:hidden;
margin:0;
padding:0;
text-align:center;
}

div#conteudo_local {
float:left;
width:82%;
height:280px;
background:#069;
overflow: hidden;
margin:5px 0;
padding:10px 0;
}

div#conteudo_home {
    float:left;
    width:82%;
    height:300px;
    overflow:hidden;
    margin:0 0 5px;
    padding:0;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:10px;
    color: #000000;
    background-image: url(imagens/fundo_home.jpg);
    background-position: center bottom;
    background-color: #069;
    }

div#conteudo2 {
    float:left;
    width:82%;
    height:300px;
    overflow:hidden;
    margin:0 0 5px;
    padding:0;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:10px;
    color: #000000;
    background-image: url(imagens/fundo_home.jpg);
    background-position: center bottom;
    background-color: #069;
    }

div#conteudo_inscr {
    width:82%;
    height:300px;
    overflow:hidden;
    margin: 0px 0 5px 0;
    padding: 0px 0 5xp 0px;
    background-color: #069;
    }

div#col_dir {
float:right;
width:17%;
height:280px;
background-color:#069;
background-image: url(imagens/ceu.jpg);
background-repeat:no-repeat;
background-position:center;
margin: 0;
padding:10px 0;
}

div#col_dir h2 {font-size:160%; color:#9E4A24;}

.style1 {color:#000;}

.menu {
list-style:none;
height:35px;
background:#fff url(imagens/button1.gif);
position:relative;
border:1px solid #000;
border-bottom:1px solid #444;
border-width:0 1px;
margin:0;
padding:0 0 0 22px;
}

.menu li a {
display:block;
height:35px;
line-height:35px;
color:#CCC;
text-decoration:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:400;
text-align:center;
cursor:pointer;
padding:0 0 0 8px;
}

.menu li { float:left;}
.menu li a b {display: block; padding:0 16px 0 8px;}
.menu li.current a {background:url(imagens/button3.gif);}
.menu li a:hover {color:#fff; background:#000 url(imagens/button2.gif);}
.menu li a:hover b {background:url(imagens/button2.gif) no-repeat right top;}
.menu li.current a:hover {color:#fff; background:#000 url(imagens/button3.gif); cursor:default;}
 span.tam {font-size:12px;}


span.hora {
font-family:Verdana, Arial,sans-serif;
color:#FF0;
font-size:13px;
font-weight:700;
line-height:20px;
}

.menu li.current a b,.menu li.current a:hover b {
background:url(imagens/button3.gif) no-repeat right top;
color:#FF0;
}

td,textarea,input,select {
background-color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
font-weight:300;
border:solid 1px #69f;
margin:7px 0 0;
padding:3px;
}

.boxinscricao {background-color:#FCFCFC;}

#form1 {
background-repeat:no-repeat;
background-image: url(imagens/background_form.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#999;
background-color:#FFF;
width:97%;
height:300px;
margin:0px 10px 10px 0;
padding:25px 15px 15px 25px;
}

.campos { border: 0px;    background:none;}
.input-select { border: 1px solid  #DADADA;}
.input-select2 { border: 1px solid  #DADADA; margin: 20px 81px;}
.input-select3 { border: 1px solid  #DADADA; margin: 20px -81px; background: #F7F7F7}
input:focus, select:focus, textarea:focus {
  background: #F0F0F0;
  color:black; 
  }

.textarea {
    border:1px solid #DADADA;
    font: 11px  Verdana, Arial, Helvetica, sans-serif;
    height:30px;
    width:270px;
    }

.mapa {
background-color:#FFF;
display:block;
width:309px;
height:220px;
background: url(imagens/hotel.jpg);
background-repeat:no-repeat;
margin:15px 0 0px 15px;
}

#end {
display:inline;
float:right;
width:310px;
height:220px;
background-color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
text-align:left;
color:#999;
border:1px dashed #999;
margin:15px 10px 10px 0;
padding:0 10px 0 10px;
}

span.aero {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:red;
font-size:16px;
font-weight:700;
line-height:20px;
}

div#rodape {
clear:both;
height:auto;
text-align:center;
font-family:Verdana,Arial, Helvetica, sans-serif;
font-size:10px;
color:#000;
background-color: #CCCCCC;
padding:2px 0;
}

div#w3c {
    width:85%;
    height:auto;
    text-align:left;
    margin:auto;
    padding:10px 0 0 0;
    text-align:center;
    }
a img {border:0;}

tonzinhu · Junho 27, 2008

o que é tudo errado?

explique melhor por favor.

testei aqui do jeito que esta sem as imagens e a unica coisa diferente em ambos browsers foram as listas que estavam aparecendo no FF e no IE não.

só tirar assim:

list-style: none;

qualquer coisa fala ai,

falora

chlins · Junho 27, 2008

o que é tudo errado?
explique melhor por favor.
testei aqui do jeito que esta sem as imagens e a unica coisa diferente em ambos browsers foram as listas que estavam aparecendo no FF e no IE não.
só tirar assim:
list-style: none;
qualquer coisa fala ai,
falora

No IE 6.0 aparece o menu empilhado um em cima do outro e o correto é um menu horizontal (barra de navegação) como mostrado corretamente no FF ou IE 7.0.

tonzinhu · Junho 27, 2008

faça dessa forma, altere o que precisar.

/**
* menu
*/
#menu{
    width:500px; /* largura do menu */
    height:28px; /* altura do menu */
    background-color:#666; /* cor de fundo do menu */
}    

/**
* formatando as listas
*/
#menu ul{
    margin:0;
    padding:0;
}

#menu ul li{
    margin:0;
    padding:0;
    list-style:none;
    display: inline; /* colocando o menu na horizontal */
}

#menu li a{
    color:#fff;
    font:14px "arial", helvetica, sans serif;
    height:25px;
    display:block;
    float:left;
    padding:3px 20px 0 20px;
    text-decoration:none;
    
}
#menu li a:hover{
    color:#666;
    background-color:#ddd;
}

<!-- inicio menu -->
<div id="menu">

<!-- menu usando listas -->
<ul>

<li> <a href="seulink">Link 1</a> </li>

<li> <a href="seulink">Link 2</a> </li>

<li> <a href="seulink">Link 3</a> </li>

<li> <a href="seulink">Link 4</a> </li>

<li> <a href="seulink">Link 5</a> </li>

</ul>

</div>
<!-- fim do menu -->

a propriedade inline coloca ele na horizontal, e o float pra deixar tudo nos conformes.

qualquer coisa fala ae.

chlins · Junho 27, 2008

faça dessa forma, altere o que precisar.

/**
* menu
*/
#menu{
    width:500px; /* largura do menu */
    height:28px; /* altura do menu */
    background-color:#666; /* cor de fundo do menu */
}    

/**
* formatando as listas
*/
#menu ul{
    margin:0;
    padding:0;
}

#menu ul li{
    margin:0;
    padding:0;
    list-style:none;
    display: inline; /* colocando o menu na horizontal */
}

#menu li a{
    color:#fff;
    font:14px "arial", helvetica, sans serif;
    height:25px;
    display:block;
    float:left;
    padding:3px 20px 0 20px;
    text-decoration:none;
    
}
#menu li a:hover{
    color:#666;
    background-color:#ddd;
}

<!-- inicio menu -->
<div id="menu">

<!-- menu usando listas -->
<ul>

<li> <a href="seulink">Link 1</a> </li>

<li> <a href="seulink">Link 2</a> </li>

<li> <a href="seulink">Link 3</a> </li>

<li> <a href="seulink">Link 4</a> </li>

<li> <a href="seulink">Link 5</a> </li>

</ul>

</div>
<!-- fim do menu -->

a propriedade inline coloca ele na horizontal, e o float pra deixar tudo nos conformes. qualquer coisa fala ae.

Como o meu está mais complexo e preciso consertar. No próximo eu refaço de acordo com o que você me passou. Eu posto o CSS para se possível ver se tem algum erro.

@charset "utf-8";
body {
background:url(imagens/fundo.gif);
color:#FFF;
text-align:center;
font:85% "Trebuchet MS",Arial,sans-serif;
padding:0;
}

.style2 {font-size:14px; font-weight:700; padding-top:210px;}

h1,h2,h4,p {font-weight:400; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0; padding:0 20px;}
p {padding:0 10px 10px;}
h1 {font-size:250%; color:#FFF; padding-top:5px;}
h2 {font-size:180%; line-height:1; color: #FFFF00;}
h3 {font-size:140%; line-height:1; color:#00F; padding-left:25px;}
h4 {font-size:160%; line-height:1; color: #FFF;}
h1,h2,p {font-weight:400; margin:0; padding:0 15px 10px 9px;}
marquee {color: #FFFF00;}

div#geral {
width:85%;
height:auto;
text-align:left;
background:#FFF;
margin:auto;
padding:5px;
}

div#topo {
background:url(imagens/topo.jpg);
background-repeat:no-repeat;
height:137px;
}

div#conteudo {
float: left;
width:82%;
height:300px;
background:#069;
overflow: hidden;
overflow-x:hidden;
margin:0;
padding:0;
text-align:center;
}

div#conteudo_local {
float:left;
width:82%;
height:280px;
background:#069;
overflow: hidden;
margin:5px 0;
padding:10px 0;
}

div#conteudo_home {
    float:left;
    width:82%;
    height:300px;
    overflow:hidden;
    margin:0 0 5px;
    padding:0;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:10px;
    color: #000000;
    background-image: url(imagens/fundo_home.jpg);
    background-position: center bottom;
    background-color: #069;
    }

div#conteudo2 {
    float:left;
    width:82%;
    height:300px;
    overflow:hidden;
    margin:0 0 5px;
    padding:0;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:10px;
    color: #000000;
    background-image: url(imagens/fundo_home.jpg);
    background-position: center bottom;
    background-color: #069;
    }

div#conteudo_inscr {
    width:82%;
    height:300px;
    overflow:hidden;
    margin: 0px 0 5px 0;
    padding: 0px 0 5xp 0px;
    background-color: #069;
    }

div#col_dir {
float:right;
width:17%;
height:280px;
background-color:#069;
background-image: url(imagens/ceu.jpg);
background-repeat:no-repeat;
background-position:center;
margin: 0;
padding:10px 0;
}

div#col_dir h2 {font-size:160%; color:#9E4A24;}

.style1 {color:#000;}

.menu {
list-style:none;
height:35px;
background:#fff url(imagens/button1.gif);
position:relative;
border:1px solid #000;
border-bottom:1px solid #444;
border-width:0 1px;
margin:0;
padding:0 0 0 22px;
}

.menu li a {
display:block;
height:35px;
line-height:35px;
color:#CCC;
text-decoration:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:400;
text-align:center;
cursor:pointer;
padding:0 0 0 8px;
}

.menu li { display:inline; float:left;}
.menu li a b {display: block; padding:0 16px 0 8px;}
.menu li.current a {background:url(imagens/button3.gif);}
.menu li a:hover {color:#fff; background:#000 url(imagens/button2.gif);}
.menu li a:hover b {background:url(imagens/button2.gif) no-repeat right top;}
.menu li.current a:hover {color:#fff; background:#000 url(imagens/button3.gif); cursor:default;}
 span.tam {font-size:12px;}


span.hora {
font-family:Verdana, Arial,sans-serif;
color:#FF0;
font-size:13px;
font-weight:700;
line-height:20px;
}

.menu li.current a b,.menu li.current a:hover b {
background:url(imagens/button3.gif) no-repeat right top;
color:#FF0;
}

td,textarea,input,select {
background-color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
font-weight:300;
border:solid 1px #69f;
margin:7px 0 0;
padding:3px;
}

.boxinscricao {background-color:#FCFCFC;}

#form1 {
background-repeat:no-repeat;
background-image: url(imagens/background_form.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#999;
background-color:#FFF;
width:97%;
height:300px;
margin:0px 10px 10px 0;
padding:25px 15px 15px 25px;
}

.campos { border: 0px;    background:none;}
.input-select { border: 1px solid  #DADADA;}
.input-select2 { border: 1px solid  #DADADA; margin: 20px 81px;}
.input-select3 { border: 1px solid  #DADADA; margin: 20px -81px; background: #F7F7F7}
input:focus, select:focus, textarea:focus {
  background: #F0F0F0;
  color:black; 
  }

.textarea {
    border:1px solid #DADADA;
    font: 11px  Verdana, Arial, Helvetica, sans-serif;
    height:30px;
    width:270px;
    }

.mapa {
background-color:#FFF;
display:block;
width:309px;
height:220px;
background: url(imagens/hotel.jpg);
background-repeat:no-repeat;
margin:15px 0 0px 15px;
}

#end {
display:inline;
float:right;
width:310px;
height:220px;
background-color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
text-align:left;
color:#999;
border:1px dashed #999;
margin:15px 10px 10px 0;
padding:0 10px 0 10px;
}

span.aero {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:red;
font-size:16px;
font-weight:700;
line-height:20px;
}

div#rodape {
clear:both;
height:auto;
text-align:center;
font-family:Verdana,Arial, Helvetica, sans-serif;
font-size:10px;
color:#000;
background-color: #CCCCCC;
padding:2px 0;
}

div#w3c {
    width:85%;
    height:auto;
    text-align:left;
    margin:auto;
    padding:10px 0 0 0;
    text-align:center;
    }
a img {border:0;}

tonzinhu · Junho 28, 2008

o que eu passei só era pra servir de base.

chlins · Junho 28, 2008

o que eu passei só era pra servir de base.

Eu entendi e te agradeço, o que gostaria é saber o está de errado no meu código tb.

Entrar

Menu no IE fica todo errado

Pergunta

chlins

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

tonzinhu

Link para o comentário

Compartilhar em outros sites

chlins

Link para o comentário

Compartilhar em outros sites

tonzinhu

Link para o comentário

Compartilhar em outros sites

chlins

Link para o comentário

Compartilhar em outros sites

tonzinhu

Link para o comentário

Compartilhar em outros sites

chlins

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades