Foros del Web » Creando para Internet » CSS »

Que le pasa al explorer con las listas?

Estas en el tema de Que le pasa al explorer con las listas? en el foro de CSS en Foros del Web. Os dejo la dirección de la página que estoy haciendo, con firefox y opera las veo tal como quiero, pero el explorer 6 me tiene ...
  #1 (permalink)  
Antiguo 13/02/2007, 07:02
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Que le pasa al explorer con las listas?

Os dejo la dirección de la página que estoy haciendo, con firefox y opera las veo tal como quiero, pero el explorer 6 me tiene frito.

http://www.futurosprofes.com/pruebas/meca.html

En los menús de la izquierda el explorer hace unos saltos de lineas exageradisimos, y en las listas de la derecha me pasa justo lo contrario, además no se qué pasa con los márgenes, no son los mismos que para el firefox.

Echarme una mano, please.
  #2 (permalink)  
Antiguo 14/02/2007, 09:52
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Que le pasa al explorer con las listas?

Up.

Necesito que alguien me diga como controlar los espacios verticales entre los elementos <li> de las listas <ul>. No consigo que se vean igual en todos los navegadores. HELP.
  #3 (permalink)  
Antiguo 14/02/2007, 13:52
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Que le pasa al explorer con las listas?

Bueno Falonpla no entendi bien tu problema por que yo lo veo igual en explorer y fireox, pero si se trata de los espacios que existe entre los li (espacio vertical) puedes probar con esto:
-agrega al css

Código HTML:
*{
        margin:0;
        padding:0;
        }
eso para limpiar los valores que tienen por defecto los tag del html

luego le agregas al li:

Código HTML:
li{
         /*todo lo que normalmente pones*/
         margin:3px 0px;
         }
Como esos son valores absolutos supongo que se vera igual en los exploradores.
Bye
  #4 (permalink)  
Antiguo 14/02/2007, 14:40
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Que le pasa al explorer con las listas?

Gracias por contestar jtoribioa, pero le añado tu código y lo sigo viendo igual. Con el firefox lo veo tal y como lo quiero, es con el explorer (version 6) con el que se me descuadra, los menús de la izuierda se estiran muchisimo, no comprendo de donde salen esos espacios entre cada <li>.
  #5 (permalink)  
Antiguo 14/02/2007, 14:57
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Que le pasa al explorer con las listas?

Hola, el <strong>NNN</strong> dentro de los <ul> no es correcto. Debes colocar <li><strong>NNN</strong></li> (dentro de un <ul> lo único que puede haber es un elemento de lista como hijo -en realidad, no sé si es que sólo puede haber un <li>... pero si estoy seguro que el <strong> no puede ser hijo de <ul>-)

Fijate si el "espacio extra" en IE lo solucionás poniendo todos los <li> "seguidos":

Código:
<ul>
<li><strong>INICIO</strong></li><li><a href="seccion" title="titulo seccion"><strong>BIENVENIDA</strong></a></li><li><a href="seccion" title="titulo seccion"><strong>DOCUMENTACIÓN</strong></a></li><li><a href="seccion" title="titulo seccion"><strong>F.A.Q.</strong></a></li>
<li><a href="seccion" title="titulo seccion"><strong>CONTACTO</strong></a></li><li><a href="seccion" title="titulo seccion"><strong>ENLACES</strong></a></li><li><a href="seccion" title="titulo seccion"><strong>FORO</strong></a></li>
</ul>
__________________
...___...
  #6 (permalink)  
Antiguo 14/02/2007, 20:38
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Que le pasa al explorer con las listas?

En tu página dentro del código colocas imagenes que no aparecen, quitandolas se ven normalmente en Firefox, Opera y IExplorer.
prueba esto en tu código css:
Código:
ul { list-style: none; margin: 0; padding: 0; }
#barramenu { width: 130px; float: left; border-color: #666666; background-color: #FF9900; margin: 10px; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }
#barramenu li a { height: 20px; voice-family: "\"}\""; voice-family: inherit; height: 12px; text-decoration: none; background-color: #000000; }
#barramenu li a:link, #barramenu li a:visited { color: #999999; display: block; padding: 4px 0 4px 0; }
#barramenu li a:hover, #barramenu li #current, #barramenu li a:active { background-color: #000000; color: #FF9900; border-left: 5px #FF9900 solid; border-right: 5px #FF9900 solid; padding: 4px 0 4px 0; }
y en tu html:
Código HTML:
<div id="barramenu">
        <ul>
            <li><strong>INICIO</strong></li>
            <li><a href="seccion" title="titulo seccion"><strong>BIENVENIDA</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>DOCUMENTACI&Oacute;N</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>F.A.Q.</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>CONTACTO</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>ENLACES</strong></a></li>

            <li><a href="seccion" title="titulo seccion"><strong>FORO</strong></a></li>
            <li><strong>ASIGNATURAS</strong></li>
            <li><a href="seccion" title="titulo seccion"><strong>REGLAMENTACI&Oacute;N</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>NORMAS</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>PSICOLOG&Iacute;A</strong></a></li>

            <li><a href="seccion" title="titulo seccion"><strong>MEC&Aacute;NICA</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>PEDAGOG&Iacute;A</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>SEGURIDAD VIAL</strong></a></li>
            <li><a href="seccion" title="titulo seccion"><strong>P.AUXILIOS</strong></a></li>
            <li>&nbsp;</li>
        </ul>
</div> 
y
Código HTML:
<div id="primeva">
    <ul>
        <li><strong>1&ordf; EVALUACI&Oacute;N</strong></li>
        <li>1. Generalidades y estructura.</li>
        <li>2. El motor Diesel.</li>
        <li>3. Sistema de Alimentaci&oacute;n.</li>
        <li>4. Sistema de Escape.</li>
        <li>5. Lubricaci&oacute;n y Refrigeraci&oacute;n.</li>
    </ul> 
</div>
<div id="segeva">
    <ul>
        <li><strong>2&ordf; EVALUACI&Oacute;N</strong></li>
        <li>6. Sistemas El&eacute;ctricos.</li>
        <li>7. Sistema de Transmisi&oacute;n.</li>
        <li>8. Ruedas y Neum&aacute;ticos.</li>
        <li>9. Direcci&oacute;n y Suspensi&oacute;n.</li>
        <li>10. Sistema de Frenado.</li>
    </ul>
</div> 
Te falta recordar un poco de código HTML puro. (un tutorial básico de html y css http://evmanuales.com/categoria.php?cid=7)
Cita:
El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres.
revisa este artículo de Caracteres Especiales:
www.desarrolloweb.com/articulos/11.php
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Espero que te sea útil.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #7 (permalink)  
Antiguo 14/02/2007, 23:36
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Que le pasa al explorer con las listas?

Gracias a los dos, lo he solucionado como comentaba Al Zuwaga, poniendo en mi código todos los <li> seguidos. Me estoy iniciando en el diseño web y simplemente insertaba esos espacios en el código por recomendación de algunos tutoriales que he leido, para que luego sea más facil leer el código, pero veo que en algunos casos es contraproducente.
Me sigue quedando una duda, por que en las otras dos listas que tengo a la derecha de la página el explorer no se inventa esos saltos que si hacía en los menus de la izquierda????, si el código lo tengo igual que tenía el de los menus, con salto de linea entre cada <li>. Tiene algo que ver el que tenga imágenes insertadas en los <li>?

Respecto a lo que comentas tú Rubén, las imágenes que no se ven es simplemente por que no las he subido, solo subi el html y el css para que pudierais ver el código, ya que se trata de la nueva versión de mi web, la anterior era en tablas, y después de hacerme asiduo de estos foros comprendí que las tablas las usan solo los hijos de Belcebú.
Respecto a los caracteres especiales, con el código tal y como lo tengo lo visualizo sin problemas. La página solo la va a ver, o mejor dicho sólo va destinada a usuarios de España, ya que se trata de material para opositores a profesor de autoescuela. Aun así me sigues recomendando que inserte ese código para los caracteres especiales?

Thanks!
  #8 (permalink)  
Antiguo 15/02/2007, 00:36
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Que le pasa al explorer con las listas?

He estado haciendo algunas pruebas con las listas de la derecha. El caso es que al tener las imagenes insertadas en los elementos li, el explorer no hacia caso de la propiedad line-height.

Es incorrecto introducir una imagen dentro de un elemento li???

He probado a poner las imagenes fuera del elemento li, pero me inserta un salto de linea, y quiero que me quede seguido del texto. Que propiedades css tengo que usar para que el texto del li y la imagen que va a continuación me quede seguido????
  #9 (permalink)  
Antiguo 15/02/2007, 10:41
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Que le pasa al explorer con las listas?

Cita:
Iniciado por falonpla Ver Mensaje
La página solo la va a ver, o mejor dicho sólo va destinada a usuarios de España, ya que se trata de material para opositores a profesor de autoescuela. Aun así me sigues recomendando que inserte ese código para los caracteres especiales?

Thanks!
Si pero algunos navegadores permiten cambiar el tipo de letra, y si no encuentra la que tu defines como fuente principal en tu página, coloca una fuente pareceida y que no reconoce acentos o cualquier tipo de caracter especial.
No esta demás en presentar un buen contenido de texto en donde todos puedan leer tranquilamente sin tener que decifrar lo que se trata en ese texto, es mi opinión.

Con respecto a las imagenes dentro de una lista prueba dando un estilo a la imagen dentro de la lista no fuera de ella.
#tudiv li img{ ...
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
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




La zona horaria es GMT -6. Ahora son las 03:47.