Menu se ve en Firefox y no en IE

GermanGaita · #1 (**permalink**) 29/04/2009, 16:32

Hola muchachos que tal? hace poco estoy con este tema de CSS y siempre entraba a este foro para buscar informacion pero nunca habia escrito un post, este es el primero ya que intento e intento pero no entiendo donde esta el problema.
El tema es el siguiente, hice un menu desplegable y en firefox se ve barbaro, el problema es cuando lo quiero ver en IE, ahi me complica la vida pq se ve muy mal.

Les dejo el codigo, es corto, simplemente puse las partes q intervienen en el asunto:

Esto es el html

Código PHP:

   
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Prueba</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

 
<body>

 
<div id="sobreheader"> <!-- arriba del header -->

<div id="header"><!--COmienzo de Header -->

  

 
<ul class="menu">

   <a href=#><li>Link 1</li></a>

   <a href=#><li>Link 2</a>

         <ul>

         <a href=#><li>Deportes</a>

            <ul>

               <a href=#><li>Menos</li></a>

               <a href=#><li>Inicio</li></a>

            </ul>

         </li>

         <a href=#><li>Mas</li></a>

      </ul>

   </li>

   <a href=#><li>Link 3</li></a>

   <a href=#><li>Link 4</li></a>

   <a href=#><li>Link 5</a>

          <ul>

         <a href=#><li>Deportes</a>

            <ul>

               <a href=#><li>Nacional</li></a>

               <a href="index.php"><li>Inicio</li></a>

            </ul>

         </li>

         <a href=#><li>Municipal</li></a>

      </ul>

    </li>

   <a href=#><li>Link 6</li></a>

   <a href=#><li>Link 7</li></a>

</ul>

</div><!--Fin del Header -->

</div>  <!-- fin del sobreheader -->

 
</body>

</html>

Esto es el CSS (style.css)

Código PHP:

  /* CSS Document */

body{

    padding:0; margin:15px; font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:13px; color:#6B6854; background-color:#fff;

    }

div, p, ul, h1, h2, h3, h4, img, form, input{

    padding:0; margin:0;

    }

ul{

    list-style-type:none;

    }

.blank{

    clear:both;

    font-size:0;

    line-height:0;

    }

    

/*------------------sobre header----------------*/

#sobreheader { 

    background:url(images/barramenu2.bmp) repeat-x bottom;/*fondo gris claro*/

 
}

 
/*------------------header----------------*/

#header{

    width:778px;

    margin:0 auto; 

    background:url(images/barramenu1.bmp) repeat-x bottom; height:22px; 

    }

 
/* TRABAJANDO CON EL MENU */

 
.menu { top:0px; width:480px; height:19px; position:relative;  left:305px;}

 
.menu a { position:relative;/*AGREGADO*/ text-decoration:none;color: #666; }

 
ul.menu

{   list-style:none; top:-1;

    position:relative;/* AGREGADO */

}

 
ul.menu li

{  padding:0px 8px 0 8px; height:22px;  /* AGREGADO */

   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */

   width:auto;

}

 
/*AGREGO  esto es para cambiarle la fuente al menu, sacarlo cualquier cosa que quede feo*/

ul.menu li a{ color:#000;

       font-family: Tahoma, Geneva, sans-serif, sans-serif; font-size:16px; position:relative; }

 
/*FIN AGREGO*/

ul.menu ul

{

   position:relative; /* Esta posición es relativa al <li> que contiene a este <ul> antes abs */

   left:76px; /* Para que no monte sobre el <li> */

   top:-19px; /*Para que queden bien alineados los sub items antes -3*/

   padding-top:0px;/*DISTANCIA DEL MENU AL PRIMER SUB ITEM*/

   display:none;

   list-style:none;

}

 
 
ul.menu li:hover > ul

{  display:block; background:rgb(237,237,237);/*COLOR DE FONDO CUANDO ACTIVO UN SUBMENU*/

                                              /*SE COLOREA TODO una verga*/

  

}

 
ul.menu li ul li:hover { background:rgb(220,220,220);} /* COLOREA EL ITEM ACTIVO*/

 
 
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */

{

   position:absolute;

   left:0px;

   top:16px;

   display:none;

   list-style:none;

 
 
}

ul.menu > li /* Sólo para li de primer nivel */

{

   display:inline;

}

 
 
/*  FIN DEL TRABAJO CON EL MENU  */

Bueno la verdad si alguno me podria ayudar con este tema me sacaria de un gran apuro, probablemente este mal algo con el tema de los positions porq no puedo entender porq en firefox se ve bien y en ie mal.
Desde ya muchas gracias muchachos!
Un saludo!

Federic0 · #2 (**permalink**) 29/04/2009, 17:08

¿Lo estás probando en IE6?

GermanGaita · #3 (**permalink**) 29/04/2009, 17:14

nono en IE7, en fin mi objetivo seria que se vea bien en todos, o no es posible esto?

Mikmoro · #4 (**permalink**) 30/04/2009, 08:34

Mira, la cosa va mal desde el principio: no puedes poner dentro de un UL directamente otras cosas que no sean LI:

<ul class="menu">
<a href=#><li>Link 1</li></a>

Un UL siempre estará formado por LI's, y dentro de estos puede haber otras cosas, pero no fuera de ellos. En ese caso debería ser algo como:

<ul class="menu">
<li><a href=#>Link 1</a></li>

Echa un vistazo a este sitio donde tienes varios ejemplos de menús desplegables sólo CSS que funcionan en todos los navegadores.

GermanGaita · #5 (**permalink**) 03/05/2009, 23:14

Perdon que no haya pasado antes es q estuve muy ocupado, la verdad me vino genial el sitio que me pasaste, es mas tome el codigo de uno de los menues para tenerlo como guia.
Si bien solucione este problema, me acarreo otros con el tema de que tablas q deberian estar una al lado de otra, me quedaron una debajo de otra, pero en fin supongo que podre solucionarlo, y sino pondre la consulta.

Es una pena esto de que paginas q se ven bien en un explorador se vean diferente en otros, tendre q tener mas cuidado y estudiar mas los codigos, si bien a paginas importantes como grandt tambien les pasa, no queda lindo.

Muchisimas gracias a todos!
Un abrazo