el Explorer no detecta correctamente la botonera

juanv87 · #1 (**permalink**) 08/03/2008, 20:14

Tengo una botonera horizontal hecha en CSS, funciona en TODOS los navegadores menos en, adivinen cual...

la cuestion es que explorando un poco cual podia haber sido el problema, llegué a que era el "margin= 0" el que hacia que el Explorer no me lea correctamente el menu de navegacion.
Pero al sacar el margin, primero que no me gusta esteticamente y segundo que en los otros navegadores la botonera se vuelca a la izquierda... aca van los codigos.

Este es el Menu:

Código PHP:

  <div id="menuh">

    <ul>

        <li><a href="#menuh" id="primero">Inicio</a></li>

        <li><a href="#menuh">Trabajos / Clientes </a></li>

        <li><a href="#menuh">C&oacute;mo empezar </a></li>

        <li><a href="#menuh">Acerca de nosotros</a></li>

        <li><a href="#menuh">Art&iacute;culos</a></li>

        <li><a href="#menuh">Contacto</a></li>

    </ul>

</div>

este es su CSS:

Código PHP:

  #menuh {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:15px;

}

 
#menuh ul, li {

    list-style-type: none;

}

 
#menuh ul {

    margin: 0;

    padding: 0;

    height:40px;

}

 
#menuh li {

    float: left;

    height:15px;

    width:auto;

}

 
#menuh a {

    text-decoration: none;

    color:#EEEEEE;

    background:#000000;

    display: block;

    padding: 3px 10px;

    text-align: center;

    padding-top:50px;

    border: 1px solid #333333;

    border-width: 1px 1px 1px 0;

    height:100%;

    font-family:Georgia, "Times New Roman", Times, serif;

    font-size:16px;

}

 
 
#menuh a#primero {

    border-left: 1px solid #333333;

}

 
#menuh a:hover {

    background:url(fondoboton.jpg);

}

y este es el CSS del index (parte de él):

Código PHP:

  * {

background-color:#000000;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#CCCCCC;

font-size:10px;

margin:0 px;   ----->>si aca le saco el 0, el IE me lo lee bien, pero el resto no.

border:0 px;

text-align:center;

}

Espero que me haya expresado lo suficiente! y puedan ayudarme.
gracias

Raulmmmm · #2 (**permalink**) 09/03/2008, 03:33

Puedes hacer un comentario condicional para quitarle el margin a IE y a los demás no:

Código HTML:

<style>
*{ margin: 0;}
</style>
<!--[if IE]>
<style type="text/css">
*{ margin: auto;}
</style>
<![endif]-->

Mira a ver si funciona.

juanv87 · #3 (**permalink**) 09/03/2008, 09:57

A perfecto, lo voy a probar... gracias

juanv87 · #4 (**permalink**) 09/03/2008, 13:15

No funciona, lo pongo entre los <head> no? o en la hoja de estilos? probé con ponerle asi <!--[if !IE]> en vez de <!--[if IE]>. Pero tampoco.

Mikmoro · #5 (**permalink**) 10/03/2008, 03:10

Hola, Juanv87.
Creo que tu problema se soluciona eliminando el height: 100% de la clase #menuh a
Mikel.

radarcba · #6 (**permalink**) 10/03/2008, 04:10

Proba esto:

Código:

* {
background-color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CCCCCC;
font-size:10px;
margin: n px;/*el margen que necesites para los exploradores distintos de IE*/
//margin: n px;/* para el IE*/
border:0 px;
text-align:center;
}

La inclusión de las barras // es una solución que adopte hace mucho para el IE. El único porblema es que no pasa la validación de CSS (según los validadores de CSS

), pero es muy practico.
Los navegadores como el Firefox toman a las // como un comentario de código e ignoran la sentencia, pero el IE pasa las // por alto y ejecuta la sentencia. En este caso al estar como segunda opción (margin) el IE le da este último valor al margin.

juanv87 · #7 (**permalink**) 11/03/2008, 11:12

Voy a probar esas opciones, gracias!!

juanv87 · #8 (**permalink**) 11/03/2008, 11:21

Funciona de las dos maneras, gracias a ambos
saludd