Foros del Web » Creando para Internet » CSS »

Problema descuadre de lista desplegable en IE

 Estas en el tema de Problema descuadre de lista desplegable en IE en el foro de CSS en Foros del Web. Saludos, tengo un codigo de una lista desplegable con un submenu solo, se muestran bien en la mayoria de navegadores, solo da problemas en internet ...
  #1 (permalink)  
Antiguo 07/09/2011, 11:28
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 6 meses
Puntos: 3
Problema descuadre de lista desplegable en IE
Saludos, tengo un codigo de una lista desplegable con un submenu solo, se muestran bien en la mayoria de navegadores, solo da problemas en internet explorer que hace un descuadre del sub menu corrido hacia la derecha y el ultimo menu me lo pone abajo del primer menu. tengo internet explorer 7 .
bueno aqui les dejo el codigo pues he buscado ayuda en internet y nada, ojala me ayuden, gracias.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> 
<head> 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>MENUS </title> 
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="css/menu.css" type="text/css" /> 
 <link rel="shortcut icon" href="favicon.ico" >
</head> 
<body>
<BODY BGCOLOR="#000080">

<SPAN style="position: absolute; top: 12px; left: 25px; width: 120px; height: 49px"><img src="lovemoon.png" width="228" height="50" />
</SPAN>

<SPAN style="position: absolute; top: 16px; left: 279px; width: 539px; height: 95px"><img src="luna romantica.jpg" width="700" height="91" /></SPAN>

<p><SPAN STYLE="position:absolute; top:22px; left:723px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 62px; color: #FFF;" > 
  
  Hola 
  
  <?php
	echo   $_COOKIE['usuario1'];
	?>
  
  
  </SPAN>
  
  <SPAN STYLE="position:absolute; top:75px; left:20px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 242px; color: #FF00FF; font-size: 12px; font-style: italic;" > 
    
    
    Si Amas algo d&eacute;jalo libre, si regresa es porque es tuyo, sino...nunca lo fue.     
    
  </SPAN> 
  
  
  
  
  
  <SPAN STYLE="position:absolute; top:640px; left:955px; color: #FFF;" > 
    
  <a href="salir.html"><img src="salir.png" alt="" width="36" height="20" /></a>  
    
  </SPAN>
  
  <SPAN STYLE="position:absolute; top:640px; left:910px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 55px; color: #FF8C00;" > 
    
    salir
    
  </SPAN>


<!--
AQUI LA LISTA DESPLEGABLE
-->


  <ul id="menu">
</p>
<li><a class="back" href="menus.php">Inicio</a></li>
<li><a class="back" href="menus.php">Mensajes</a></li>     
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url..."> En Linea</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Busqueda</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Coincidencias</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Visitantes</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url..."> Usuarios</a></li>
<li><a class="back" href="menus.php">Mi Perfil</a>
<ul> 
<li><a href="editarperfil.php">Editar Perfil</a></li>
<li><a href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Subir Fotos</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Cuenta Gold</a>
<ul> 
<li><a href="paginadeinicio.php">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>



</div>
<style type = "text/css">
.back{
background-image:url('');
background-repeat:no-repeat;
background-color:#99cccc;}	
#menu{padding-left:0px; margin-top:120px;	}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:100px;height:20px; background-color:#FF0000;border:1px solid; padding:2px;text-decoration:none;
text-align:center; color:#000;font-family:arial; font-size:15px;font-weight:bold;}
#menu li a:hover{background:navy;border-color:transparent;color:#00FF00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block;float:none; position:relative; padding:0px}
#menu li:hover ul{display:block; padding-left:0px;}
</style>


</body> 
</html>
Última edición por gabrielcorr4; 07/09/2011 a las 12:33
  #2 (permalink)  
Antiguo 07/09/2011, 14:00
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 260
Antigüedad: 20 años, 7 meses
Puntos: 2
Respuesta: Problema descuadre de lista desplegable en IE
Bueno en primer lugar dejame decirte que tienes varios problemas en tu codigo html:
Código: 
    <body>
        <BODY BGCOLOR="#000080">
en la linea 11 elimina ese <BODY BGCOLOR="#000080"> pues esta de más ya que en la linea 10 <body> ya existe.

En la liena 27
Código: 
                <ul id="menu">
            </p>
hay una etiqueta de cierre </p> dentro de una etiqueta de apertura de lista <ul id="menu"> eliminala.

Linea 70:
Código: 
            </li>
            </div>
Una etiqueta de cierre </div> donde debería de ser una </ul> cambia eso.

Linea 72:

Código: 
<style type = "text/css">
                .back {
                    background-image: url('');
                    background-repeat: no-repeat;
                    background-color: #99cccc;
                }
                #menu {
                    padding-left: 0px;
                    margin-top: 120px;
                }
                #menu li {
                    list-style: none;
                    float: left;
                }
                #menu li a {
                    display: block;
                    width: 100px;
                    height: 20px;
                    background-color: #FF0000;
                    border: 1px solid;
                    padding: 2px;
                    text-decoration: none;
                    text-align: center;
                    color: #000;
                    font-family: arial;
                    font-size: 15px;
                    font-weight: bold;
                }
                #menu li a:hover {
                    background: navy;
                    border-color: transparent;
                    color: #00FF00;
                }
                #menu li ul {
                    display: none;
                    position: absolute;
                }
                #menu li ul li {
                    display: block;
                    float: none;
                    position: relative;
                    padding: 0px
                }
                #menu li:hover ul {
                    display: block;
                    padding-left: 0px;
                } 
 </style>
Todo el bloque de style debe de ir por convención entre las etiquetas head o en un archivo externo cambia eso tambien.

Con estos arreglos espero soluciones tus problemas.

_Saludos...
__________________
QMD...
Última edición por orochies; 07/09/2011 a las 14:07 Razón: un error de tipeo.
  #3 (permalink)  
Antiguo 07/09/2011, 14:52
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Problema descuadre de lista desplegable en IE
he hecho exactamente lo que dijiste y el problema en internet explorer sigue exactamente igual, en cuanto al fondo de color de pantalla no lo veo repetido.
por favor "alguien que me ayude en css listas despegables configurado para ie7; le puse en un meta una vision de compatibilidad y nada.


aqui con su arreglo:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> 
<head> 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>MENUS </title> 
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="css/menu.css" type="text/css" /> 
 <link rel="shortcut icon" href="favicon.ico" >
 
 <style type = "text/css">
.back{
background-image:url('');
background-repeat:no-repeat;
background-color:#99cccc;}	
#menu{padding-left:0px; margin-top:120px;	}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:100px;height:20px; background-color:#FF0000;border:1px solid; padding:2px;text-decoration:none;
text-align:center; color:#000;font-family:arial; font-size:15px;font-weight:bold;}
#menu li a:hover{background:navy;border-color:transparent;color:#00FF00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block;float:none; position:relative; padding:0px}
#menu li:hover ul{display:block; padding-left:0px;}
</style>

</head> 
<body>
<BODY BGCOLOR="#000080">

<SPAN style="position: absolute; top: 12px; left: 25px; width: 120px; height: 49px"><img src="lovemoon.png" width="228" height="50" />
</SPAN>

<SPAN style="position: absolute; top: 16px; left: 279px; width: 539px; height: 95px"><img src="luna romantica.jpg" width="700" height="91" /></SPAN>

<p><SPAN STYLE="position:absolute; top:22px; left:723px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 62px; color: #FFF;" > 
  
  Hola 
  
  <?php
	echo   $_COOKIE['usuario1'];
	?>
  
  
  </SPAN>
  
  <SPAN STYLE="position:absolute; top:75px; left:20px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 242px; color: #FF00FF; font-size: 12px; font-style: italic;" > 
    
    
    Si Amas algo d&eacute;jalo libre, si regresa es porque es tuyo, sino...nunca lo fue.     
    
  </SPAN> 
  
  
  
  
  
  <SPAN STYLE="position:absolute; top:640px; left:955px; color: #FFF;" > 
    
  <a href="salir.html"><img src="salir.png" alt="" width="36" height="20" /></a>  
    
  </SPAN>
  
  <SPAN STYLE="position:absolute; top:640px; left:910px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 55px; color: #FF8C00;" > 
    
    salir
    
  </SPAN>
  
  <ul id="menu">

<li><a class="back" href="menus.php">Inicio</a></li>
<li><a class="back" href="menus.php">Mensajes</a></li>     
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url..."> En Linea</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Busqueda</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Coincidencias</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Visitantes</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url..."> Usuarios</a></li>
<li><a class="back" href="menus.php">Mi Perfil</a>
<ul> 
<li><a href="editarperfil.php">Editar Perfil</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Subir Fotos</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Cuenta Gold</a>
<ul> 
<li><a href="paginadeinicio.php">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>
</ul>






</body> 
</html>
  #4 (permalink)  
Antiguo 07/09/2011, 15:16
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 260
Antigüedad: 20 años, 7 meses
Puntos: 2
Respuesta: Problema descuadre de lista desplegable en IE
Cita:
en cuanto al fondo de color de pantalla no lo veo repetido.
No se cuel se el problema entonces pero de que lo tienes repetido lo tienes repetido.

Código: 
<body>
<BODY BGCOLOR="#000080">
No pueden haber dos elementos body en el documento o quitas <body> o quitas <BODY BGCOLOR="#000080"> pero no los dos a la vez.

_Saludos...
__________________
QMD...
  #5 (permalink)  
Antiguo 07/09/2011, 15:49
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Problema descuadre de lista desplegable en IE
impresionante ver que alguien pretenda usar un doctype strict y ni siquiera sepa lo mínimo requerido de HTML y CSS compañero @gabrielcorr4 como ya le mencionaron tiene muchos errores en su código corrijalos y lo mas probable que se solvente su problema.

pase a http://www.librosweb.es y tome lectura de html y css, créame que usar un doctype strict no es cualquier cosa yo prefiero usar
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

aquí le dejo algunos ejemplos de menús CSS -> clic aquí
tomelos como base para crear y/o corregir el suyo
  #6 (permalink)  
Antiguo 12/09/2011, 11:29
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Problema descuadre de lista desplegable en IE
Y quien te dijo que no se ni lo basico de HTML Y CSS, bueno no sabia que tenia que ser ingeniero de la nasa para pedir ayuda aqui, en vez de criticarme me hubieras ayudado concretamente en mi problema pero no quisiste o no pudiste.ademas "ya escribi que ya correji todo y no lo leiste". incluso puse su ejemplo y nada. igualmente sigo sin resolver mi problema y es cierto es mejor pedir ayuda en los manuales que en cierta gente.
Última edición por gabrielcorr4; 12/09/2011 a las 11:39
  #7 (permalink)  
Antiguo 12/09/2011, 11:41
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: Problema descuadre de lista desplegable en IE
como le indican tiene que quitar "<BODY BGCOLOR="#000080">" ya que tiene 2 <body> y si es posible evitar las mayusculas... luego agregue estas lineas a su codigo
Código CSS: 
Ver original
  1. *{ margin:0; padding:0}
  2.  #menu > li{ position:relative;}
  3.  #menu > li > ul{ left:0;}
y listo busque informacion sobre reset CSS...

PD: le recomiendo este sitio http://librosweb.es/ no se convertira en ingeniero pero ya no preguntara... y asi no se llevara disgustos de la gente que le responda y le aconseje de buena fe
__________________
Toroflix - movies.
  #8 (permalink)  
Antiguo 12/09/2011, 11:57
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Problema descuadre de lista desplegable en IE
gracias ya lo se, pero por favor uso strict no xhtml transitional:


Transitional es como escribir un texto en el que se permitan las faltas de ortografia y gramaticales, asi como de estructura de sujeto , predicado mal colocadas y junto a informacion que no tenga nada que ver..

cuando vea que haya incompatiblidad de navegadores por alli lo cambiare.
  #9 (permalink)  
Antiguo 12/09/2011, 12:02
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Problema descuadre de lista desplegable en IE
Mil Gracias AlexK por "tomarse su tiempo", ya se soluciono era solo agregar ese codigo css. pero si la gente aconceja de buena fe, como usted, (me imagino) no se pone a criticar tanto ni a darselas de genio y ya me ha pasado varias veces en estos posts. ire a los manuales asi me demore mas. Gracias
Última edición por gabrielcorr4; 12/09/2011 a las 12:09

Etiquetas: desplegable, fondo, html, lista
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:34.