Tengo un menu de navegacion de pestañas con <ul> y <li>. Despues tengo otras pestañas mas pequelas que las anteriores que no usan <ul> ni <li>. Estan con capas.
Cita:
<ul>
<li><a href="link1.php">Link1</a></li>
<li><a href="link2.php">Link2</a></li>
<li><a href="link3.php">Link3</a></li>
</ul>
<div id="menu"><a href="link4.php">Link4</a></div>
<div id="menu"><a href="link5.php">Link5</a></div>
<div id="menu"><a href="link6.php">Link6</a></div>
<ul>
<li><a href="link1.php">Link1</a></li>
<li><a href="link2.php">Link2</a></li>
<li><a href="link3.php">Link3</a></li>
</ul>
<div id="menu"><a href="link4.php">Link4</a></div>
<div id="menu"><a href="link5.php">Link5</a></div>
<div id="menu"><a href="link6.php">Link6</a></div>
El problema es que en IE6 (no en IE7 ni IE8 ni Firefox) se ven 2 pixeles de más de espacio entre la ultima pestaña de las <li> y la primera pestaña de id="menu".
Los estilos de los <li> son estos:
Cita:
#navegacion li a {
background:url(enlace.gif) 0 0 no-repeat;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 2px;
margin-right: 2px;
}
#navegacion li a:hover {
color:#000;
}
Y los estilos que he aplicado a las capas de id=menu son estos:#navegacion li a {
background:url(enlace.gif) 0 0 no-repeat;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 2px;
margin-right: 2px;
}
#navegacion li a:hover {
color:#000;
}
Cita:
#menu {
float:left;
width:78px;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
background:url(enlace2.gif) 0 0 no-repeat;
text-align:center;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 2px;
margin-right: 2px;
}
#menu a{
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
}
.menu a:hover {
color:#000;
}
#menu {
float:left;
width:78px;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
background:url(enlace2.gif) 0 0 no-repeat;
text-align:center;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 2px;
margin-right: 2px;
}
#menu a{
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
}
.menu a:hover {
color:#000;
}