Ayuda para centrar menu horizontal en Firefox

[fgonzalezmx]

Amigos, buenas noches

Tengo un problema muy similar al de este post dentro de forosdelweb: "como-centrar-este-menu-css-353257" (lo siento pero soy nuevo y no me dejan incluir enlaces ni direcciones web) estoy intentando centrar un menu horizontal en firefox y probe la solucion pero no me funciono a mi.

Es un menu horizontal de 6 opciones y cada una de esas opciones llama a un menu vertical situado mas abajo.

En IExplorer me funciona muy bien pero en Firefox no, me sale alineado a la izquierda e incluso me cambia el tamaño de cada boton a 181px cuando el real es de 160px. Pude corregir algunas cosas que se descuadraban en Firefox pero solo me hace falta que el menu horizontal quede centrado y con el tamaño de 160px como en el IExplorer. Adjunto css y html.

CSS

/*Menu Vertical Azul*/

#menuv_azul {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 230px;
font: 10pt "Verdana", Arial, Helvetica, sans-serif;
}
#menuv_azul ul, li {
list-style-type: none;
}

#menuv_azul ul {
margin: 0;
padding: 0;
}

#menuv_azul li {
border-bottom: 1px solid #ACCFE8;
}

#menuv_azul a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 230px;
}

#menuv_azul a:hover {
color: #000000;
background: #DBEBF6;
}

/*Menu Vertical Verde de Titulo*/

#menuv_azul_title {
border: 1px solid #31CD21;
border-width: 1px 1px 0 1px;
width: 230px;
font: 10pt "Verdana", Arial, Helvetica, sans-serif;
}
#menuv_azul_title ul, li {
list-style-type: none;
}

#menuv_azul_title ul {
margin: 0;
padding: 0;
}

#menuv_azul_title li {
border-bottom: 1px solid #31CD21;
}

#menuv_azul_title a {
text-decoration: none;
color: #000000;
background: #31CD21;
display: block;
padding: 3px 6px;
width: 230px;
}

#menuv_azul_title a:hover {
color: #000000;
background: #31CD21;
}


/*Menu Horizontal General*/
#menuh {
font: 10pt "Verdana", Arial, Helvetica, sans-serif;
margin-top: 20px;
/*width: 960*/
width: 100%;
}

#menuh ul, li {
list-style-type: none;
}

/*
#menuh ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 960px;
}
*/

#menuh ul {
margin: 0px;
padding: 0px;
}

#menuh li {
float: left;
/* width: 960px;*/
}

#menuh a {
text-decoration: none;
color: #ffffff;
background: #2F86C9;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0px;
width: 160px;
}


#menuh a#primero {
border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
color: #000000;
background: #ffffff;
}

PAGINA HTML

<table width="960" border="0" cellpadding="0" cellspacing="0" summary="botones_up">
<tr>

<div id="menuh">
<ul>
<li><a href="index.html" id="primero">Productos</a></li>
<li><a href="hosting.html">Hosting & Webdesign</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="soporte.html">Soporte</a></li>
<li><a href="politicas.html">Pol&iacute;ticas</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
</ul>
</div>

</tr>
</table>


</br>

<table width="960" border="0" cellpadding="0" cellspacing="0" summary="content">
<tr>
<td width="230" valign="top">
<div align="left" >
<table width="230" border="0" cellpadding="0" cellspacing="0" summary="botones_left" >
<div id="menuv_azul_title">
<ul>
<li><a href="#"><b><center>Soporte</center></b></a></li>
</ul>
</div>
<div id="menuv_azul">
<ul>
<li><a href="#menuv">Mantenimiento Preventivo</a></li>
<li><a href="#menuv">Mantenimiento Correctivo</a></li>
<li><a href="#menuv">Instalaci&oacute;n y Configuraci&oacute;n</a></li>
<li><a href="#menuv">Actualizaciones</a></li>
<li><a href="#menuv">Seguridad</a></li>
<li><a href="#menuv">P&oacute;lizas</a></li>
<li><a href="#menuv">Linux / Unix</a></li>
<li><a href="#menuv">Links</a></li>
</ul>
</div>
</table>
</div>

</br>
</td>
<td width="730" valign="top">
<div align="left">

<iframe src="#" name="content" scrolling="no" frameborder="0" width="730" height="950">
</iframe>

</div>
</td>
</tr>
</table>
</center>

</body>
</html>





DE ante mano muchas gracias!

[Mikmoro]

Tienes el menú en una caja y ésta en una tabla, pero sin celda, es decir, has puesto un TR y luego el DIV, sin TD. Eso no debe ser nunca así.

Por otro lado, si tienes el menú en una tabla, deberás saber cómo centrar la celda o el menú dentro de la celda, con las propiedades de las tablas, no de CSS.

[fgonzalezmx]

Mikmoro, muchas gracias..... FUNCIONO!!

Efectivamente hacia falta un <td>, se lo puse y quedo centrado el menu.

Ahora solo me queda el problema de que en firefox no respeta el tamaño de 160px por cada boton me lo pone de 181 cada uno

El ancho de mi tabla es de 960 con 6 botones (160 x 6) que en Iexplorer se ve bien pero en Firefox el ultimo boton lo manda al "renglon" de abajo.

De antemno muchas gracias

Francisco J. Gonzalez

[kseso?]

Porque según es estándar, el tamaño de una caja está formado por su anchura + padding + bordes + margin.

En este caso, FF sigue el modelo de caja estándar. Es ie el que va por libre (como siempre).

Un saludo