2 replies to this topic

[Kiedis]

Meu layout tem três div's (colunas)
Nas div's left e right eu tenho um menu em cada uma delas, certo?

No IE as três div's ficam alinhadinhas mais no Firefox a div left
fica com uma margem que não sei de onde saiu, com isso o tamanho dos links fica pequeno
e fica tudo desalinhado nesse menu.
O estranho é qua a div "right" fica normal e não tem diferença entre as duas, só mesmo o tamanho e o float!

Sabem o que pode ser?

Veja o css:
[codebox]body {
background:#fff;
font:normal 13px/normal "Trebuchet Ms", arial, sans-serif;
margin:5px 5px;
padding:0;
padding:0;
}

#geral {
background:#f9f9f9;
margin-top:0;
padding-top:0;
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
width:850px;
}

#conteudo_centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}

#left{
width:156px;
float:left;
margin-top:5px;
}

#right {
width:178px;
float:right;
margin-top:5px;
}
ul#menu {

margin: 0 3px 0 5px;
padding: 0;
width: 148px; /* Width of Menu Items */
background: #fff; /* IE6 Bug */
font:normal 12px/normal "trebuchet ms", arial, sans-serif;
}

ul#menu li, ul#menu_r li {
border-bottom: 1px solid #ccc;
}

ul#menu li a:link, ul#menu li a:visited, ul#menu_r li a:link, ul#menu_r li a:visited {
display: block;
text-decoration: none;
color:#666;
padding:3px 5px;
border: 1px solid #ddd;
border-bottom: 0;
border-top: 0;
}

ul#menu li a:hover, ul#menu_r li a:hover {
background-color: #f9f9f9;
color:#c70000;
}

ul#menu .titulo {
height: 20px;
border:1px solid #ddd;
font-family:Verdana;
font-size:13px;
font-weight:bold;
color:#000;
width:146px;
padding-top:3px;
}

ul#menu_r {
margin: 0 5px 0 3px;
padding: 0;
width: 170px; /* Width of Menu Items */
background: #fff; /* IE6 Bug */
font:normal 12px/normal "trebuchet ms", arial, sans-serif;
}

ul#menu_r .titulo {
height: 20px;
border:1px solid #ddd;
font-family:Verdana;
font-size:13px;
font-weight:bold;
color:#000;
width:168px;
padding-top:3px;
}[/codebox]

E aqui veja a página:
[codebox]
<div id="geral">
<div id="left">
<ul id="menu">
<div class="titulo"> » Menu 1</div>
<li><a href="/" >Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<div class="titulo"> » Menu 2</div>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>

<div id="conteudo_centro">Conteudo do Site</div>
<div id="right">
<ul id="menu_r">
<div class="titulo"> » Menu Direita</div>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>
</div>
[/codebox]

[Alex Hiroshi]

Não vi diferença nos dois navegadores, a não ser a lista, que no Firefox aparece.
Coloque um list-style:none nas ul's para resolver.

[Kiedis]

Não vi diferença nos dois navegadores, a não ser a lista, que no Firefox aparece.
Coloque um list-style:none nas ul's para resolver.

É, eu coloquei assim no meu css

* {
list-style:none;
margin:0;
padding:0;
}


vlw!