Erro em Menu (Float dá erro no IE)

alohmann · Abril 14, 2008

Pessoal, estou fazendo uns testes em CSS para um site, e no Firefox está tudo funcionando as 1000 maravilhas, mas no IE não. Tenho um menu horizontal com 4 "botões", q deveriam ficar alinhados, um ao lado do outro (exatamente como no Firefox), mas no IE eles estão ficando um embaixo do outro, alinhados a esquerda da tela, como se fosse um menu vertical. O endereço do site é http://www.augustolohmann.com.br/slavian/

Segue abaixo o código do CSS q regula esse menu. O 1º botao está com o div do menu1, o 2º botao está com o div do menu2, e assim vai...

/**************************************************************
   Top Block Menu
 **************************************************************/

#menu {
  margin: 0 auto;
}

#menu ul {
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;

  text-align: left;
  background: #000 url(../images/bg/menu.gif) repeat-x top left;
}

#menu ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu ul li a {
  float: left;
  width: 100%;
  height: 4.5em;

  font: 400 1.2em arial, sans-serif;
  letter-spacing: 0.1em;

  color: #fff;

  border-top: 7px solid #DBEAEA;
  border-bottom: 15px solid #FFF;
}

#menu ul li a span {
  display: block;
  padding: 2px 7px;
}


#menu ul li a span.desc {
  font-size: 0.8em;
  color: #8C8D94;
}


#menu ul li a:hover,
#menu ul li a.here {
  background: #CCCCCC;
  border-top: 7px solid #009933;
}

#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
  color: #FFF;
}




/**************************************************************
   Top Block Menu 2
 **************************************************************/

#menu2 {
  margin: 0 auto;
}

#menu2 ul {
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;

  text-align: left;
  background: #000 url(../images/bg/menu.gif) repeat-x top left;
}

#menu2 ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu2 ul li a {
  float: left;
  width: 100%;
  height: 4.5em;

  font: 400 1.2em arial, sans-serif;
  letter-spacing: 0.1em;

  color: #fff;

  border-top: 7px solid #DBEAEA;
  border-bottom: 15px solid #FFF;
}

#menu2 ul li a span {
  display: block;
  padding: 2px 7px;
}


#menu2 ul li a span.desc {
  font-size: 0.8em;
  color: #8C8D94;
}


#menu2 ul li a:hover,
#menu2 ul li a.here {
  background: #CCCCCC;
  border-top: 7px solid #FFCC00;
}

#menu2 ul li a:hover span.desc,
#menu2 ul li a.here span.desc {
  color: #FFF;
}




/**************************************************************
   Top Block Menu 3
 **************************************************************/

#menu3 {
  margin: 0 auto;
}

#menu3 ul {
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;

  text-align: left;
  background: #000 url(../images/bg/menu.gif) repeat-x top left;
}

#menu3 ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu3 ul li a {
  float: left;
  width: 100%;
  height: 4.5em;

  font: 400 1.2em arial, sans-serif;
  letter-spacing: 0.1em;

  color: #fff;

  border-top: 7px solid #DBEAEA;
  border-bottom: 15px solid #FFF;
}

#menu3 ul li a span {
  display: block;
  padding: 2px 7px;
}


#menu3 ul li a span.desc {
  font-size: 0.8em;
  color: #8C8D94;
}


#menu3 ul li a:hover,
#menu3 ul li a.here {
  background: #CCCCCC;
  border-top: 7px solid #006699;
}

#menu3 ul li a:hover span.desc,
#menu3 ul li a.here span.desc {
  color: #FFF;
}




/**************************************************************
   Top Block Menu 4
 **************************************************************/

#menu4 {
  margin: 0 auto;
}

#menu4 ul {
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;

  text-align: left;
  background: #000 url(../images/bg/menu.gif) repeat-x top left;
}

#menu4 ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu4 ul li a {
  float: left;
  width: 100%;
  height: 4.5em;

  font: 400 1.2em arial, sans-serif;
  letter-spacing: 0.1em;

  color: #fff;

  border-top: 7px solid #DBEAEA;
  border-bottom: 15px solid #FFF;
}

#menu4 ul li a span {
  display: block;
  padding: 2px 7px;
}


#menu4 ul li a span.desc {
  font-size: 0.8em;
  color: #8C8D94;
}


#menu4 ul li a:hover,
#menu4 ul li a.here {
  background: #CCCCCC;
  border-top: 7px solid #FFFFFF;
}

#menu4 ul li a:hover span.desc,
#menu4 ul li a.here span.desc {
  color: #FFF;

alohmann · Abril 14, 2008

Outros códigos q podem ser importantes:

/* Column widths */

.width {

width: 776px;

}

Código na página index.php para o menu:

<ul>

<li>

<span class="title ">CARNIVAL</span>

<span class="desc style7">Texto sobre carnaval</span>

</a>

</li>

</ul>

</div>

<ul>

<li>

<span class="desc style3">View the included layout</span>

</a>

</li>

</ul>

</div>

<ul>

<li>

<span class="title ">ESPECIAIS 1</span>

<span class="desc">Destaque especial 1</span>

</a>

</li>

</ul>

</div>

<ul>

<li>

<span class="title ">ESPECIAIS 2</span>

<span class="desc">Destaque para especiais 2</span>

</a>

</li>

</ul>

</div>

Michelly · Abril 14, 2008

Olá alohmann,

Ao que me parece, a formatação não está acontecendo no IE pois você definiu apenas as listas para flutuarem à esquerda. Assim, os seus DIVs não estão flutuando, consequentemente irão aparecer um embaixo do outro.

Tente definir para cada DIV menu o float: left tbm... Creio que resolverá.

Espero ter ajudado. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

alohmann · Abril 15, 2008

Oi, obrigado pela resposta, ams acho q não deu muito certo. Coloquei o "float: left;" em cada menu mas aí continuou errado no IE e passou a ficar com o mesmo erro tb no firefox.

alohmann · Abril 15, 2008

Galera, consegui arrumar no IE, mas agora deu um errinho no Firefox. :(

No IE ficou tudo certo, no Firefox o menu está horizontal, certinho, mas ficou alinhado a esquerda da página, saindo do layout.

Só alterei esse código pra arrumar no IE:

<div id="" class="width">

<ul>

<li>

<span class="title ">CARNIVAL</span>

<span class="desc style7">Texto sobre carnaval</span>

</a>

</li>

</ul>

</div>

<ul>

<li>

<span class="desc style3">View the included layout</span>

</a>

</li>

</ul>

</div>

<ul>

<li>

<span class="title ">ESPECIAIS 1</span>

<span class="desc">Destaque especial 1</span>

</a>

</li>

</ul>

</div>

<ul>

<li>

<span class="title ">ESPECIAIS 2</span>

<span class="desc">Destaque para especiais 2</span>

</a>

</li>

</ul>

</div>

</div>

brcontainer · Abril 18, 2008

alohmann não faça postes duplos e nunca deixe de usar CODE(para códigos pequenos) e CODEBOX(para códigos grandes).

falow abraço ;)

faro · Abril 19, 2008

Galera, consegui arrumar no IE, mas agora deu um errinho no Firefox. :(

No IE ficou tudo certo, no Firefox o menu está horizontal, certinho, mas ficou alinhado a esquerda da página, saindo do layout.

Só alterei esse código pra arrumar no IE:

<div id="" class="width">

<div id="menu">

<ul>

<li>

<a href="?" onfocus="blur()">

<span class="title ">CARNIVAL</span>

<span class="desc style7">Texto sobre carnaval</span>

</a>

</li>

</ul>

</div>

<div id="menu2">

<ul>

<li>

<a href="?" onfocus="blur()">

<span class="title ">NEW YEAR</span>

<span class="desc style3">View the included layout</span>

</a>

</li>

</ul>

</div>

<div id="menu3">

<ul>

<li>

<a href="?" onfocus="blur()">

<span class="title ">ESPECIAIS 1</span>

<span class="desc">Destaque especial 1</span>

</a>

</li>

</ul>

</div>

<div id="menu4">

<ul>

<li>

<a href="?" onfocus="blur()">

<span class="title ">ESPECIAIS 2</span>

<span class="desc">Destaque para especiais 2</span>

</a>

</li>

</ul>

</div>

</div>

velhao beleza...

você ja tntou usar display:inline; no seu li acho que pode ajudar a organizar o que você quer, qualquer duvida vai no majour

espero que consiga.

alohmann · Abril 19, 2008

alohmann não faça postes duplos e nunca deixe de usar CODE(para códigos pequenos) e CODEBOX(para códigos grandes).

falow abraço ;)

Fala Silverfox. Foi mal, o que seria post duplo?

Quanto ao codebox, pode deixar que vou colocar na próxima, nunca tinha usado isso mas agora vi como é.

Grande abraço!

Arquivado

Erro em Menu (Float dá erro no IE)

Recommended Posts

alohmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alohmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Michelly 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alohmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alohmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

faro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alohmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Fóruns

Tempo Real

Informação importante