Foros del Web » Creando para Internet » CSS »

Menu se ve en Firefox y no en IE

Estas en el tema de Menu se ve en Firefox y no en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/04/2009, 17:32
 
Fecha de Ingreso: abril-2009
Mensajes: 53
Antigüedad: 8 años, 7 meses
Puntos: 1
Menu se ve en Firefox y no en IE

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:0margin:15pxfont-family:VerdanaArialHelveticasans-serif;
    
font-size:13pxcolor:#6B6854; background-color:#fff;
    
}
divpulh1h2h3h4imgforminput{
    
padding:0margin:0;
    }
ul{
    list-
style-type:none;
    }
.
blank{
    
clear:both;
    
font-size:0;
    
line-height:0;
    }
    
/*------------------sobre header----------------*/
#sobreheader { 
    
background:url(images/barramenu2.bmprepeat-x bottom;/*fondo gris claro*/

}

/*------------------header----------------*/
#header{
    
width:778px;
    
margin:0 auto
    
background:url(images/barramenu1.bmprepeat-x bottomheight:22px
    }

/* TRABAJANDO CON EL MENU */

.menu top:0pxwidth:480pxheight:19pxposition:relative;  left:305px;}

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

ul.menu
{   list-style:nonetop:-1;
    
position:relative;/* AGREGADO */
}

ul.menu li
{  padding:0px 8px 0 8pxheight: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 acolor:#000;
       
font-familyTahomaGenevasans-serifsans-seriffont-size:16pxposition: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:blockbackground: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.menuli 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!
  #2 (permalink)  
Antiguo 29/04/2009, 18:08
 
Fecha de Ingreso: diciembre-2007
Ubicación: Buenos Aires
Mensajes: 328
Antigüedad: 10 años
Puntos: 1
Respuesta: Menu se ve en Firefox y no en IE

¿Lo estás probando en IE6?
  #3 (permalink)  
Antiguo 29/04/2009, 18:14
 
Fecha de Ingreso: abril-2009
Mensajes: 53
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Menu se ve en Firefox y no en IE

nono en IE7, en fin mi objetivo seria que se vea bien en todos, o no es posible esto?
  #4 (permalink)  
Antiguo 30/04/2009, 09:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu se ve en Firefox y no en IE

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.
  #5 (permalink)  
Antiguo 04/05/2009, 00:14
 
Fecha de Ingreso: abril-2009
Mensajes: 53
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Menu se ve en Firefox y no en IE

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:06.