Que le pasa al explorer con las listas?

[falonpla]

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.

[falonpla]

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.

[jtoribioa]

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

[falonpla]

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>.

[AlZuwaga]

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>

[Ruben_JD]

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)

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.

[falonpla]

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!

[falonpla]

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????

[Ruben_JD]

Iniciado por falonpla

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{ ...