Lista desordenada de HTML CSS para pedigrí. ¿Cómo hacer que se muestre en IE8 consistente con Firefox?

Estoy creando una tabla similar usando una lista anidada desordenada de html, estilo con css para que se vea como una tabla. Ahora se ve exactamente como quiero en Firefox, pero se ve horrible en IE8. (Lo siento, no tengo suficiente reputación para publicar la imagen para mostrarle las diferencias, consulte el código a continuación).

Código HTML como se muestra a continuación:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
    TODO write content
</div>
<ul>
    <li>
    <div class="box">
        <div class="title">
            My Categories
        </div>
        <div class="description">
            My Categories
        </div>
    </div>
    <ul>
        <li>
        <div class="box">
            <div class="title">
                Fun
            </div>
            <div class="description">
                Fun
            </div>
        </div>
        <ul>
            <li>
            <div class="box">
                <div class="title">
                    Sport
                </div>
                <div class="description">
                    Sport
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        Surfing
                    </div>
                    <div class="description">
                        Surfing
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        Extreme knitting
                    </div>
                    <div class="description">
                        Extreme knitting
                    </div>
                </div>
                </li>
            </ul>
            </li>
            <li>
            <div class="box">
                <div class="title">
                    Friends
                </div>
                <div class="description">
                    Friends
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        Gerald
                    </div>
                    <div class="description">
                        Gerald
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        Gwendolyn
                    </div>
                    <div class="description">
                        Gwendolyn
                    </div>
                </div>
                </li>
            </ul>
            </li>
        </ul>
        </li>
        <li>
        <div class="box">
            <div class="title">
                Work
            </div>
            <div class="description">
                Work
            </div>
        </div>
        <ul>
            <li>
            <div class="box">
                <div class="title">
                    Reports
                </div>
                <div class="description">
                    Reports
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        Annual
                    </div>
                    <div class="description">
                        Annual
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        Status
                    </div>
                    <div class="description">
                        Status
                    </div>
                </div>
                </li>
            </ul>
            </li>
            <li>
            <div class="box">
                <div class="title">
                    Trips
                </div>
                <div class="description">
                    Trips
                </div>
            </div>
            <ul>
                <li>
                <div class="box">
                    <div class="title">
                        National
                    </div>
                    <div class="description">
                        National
                    </div>
                </div>
                </li>
                <li>
                <div class="box">
                    <div class="title">
                        International
                    </div>
                    <div class="description">
                        International
                    </div>
                </div>
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</body>
</html>

CSS:

.box {
    border: 1px solid #BBBBBB;
    border-radius: 4px 4px 4px 4px;
    margin: 10px;
    width: 200px;
    position: relative;
    padding: 10px;
    color: #333333;
    font-weight: normal;
    min-width: 0;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
    background: #e6e49f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
}
.title {
    width: 100%;
    font-weight: bolder;
}
.description {
    width: 100%;
    font-size: medium;
}
li,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul {
    line-height: 38em;
    position: relative;
}
ul ul {
    line-height: 18em;
    position: absolute;
    left: 200px;
    top: 0;
}
ul ul ul { line-height: 8em }
ul ul ul ul { line-height: 3em }
ul li { position: relative }

Traté de investigar mucho sobre CSS durante la semana sobre este tema y pensé que el problema era "altura de línea" porque parecía incómodo en IE8. Estudié que la versión IE8 debería poder atender el problema de la lista desordenada.

Alguien me puede dar alguna idea de como solucionar esto? ¿O algo que pueda usar para reemplazar la "altura de línea"? Todavía quiero recordar la lista desordenada (<ul>) solo con css, no <div> porque no quiero cambiar el archivo central de cakephp.

preguntado el 22 de mayo de 12 a las 09:05

¿Por qué no usas una mesa para esto? -

Primero asegúrese de tener un tipo de documento y que su html sea válido para que el navegador entre en modo estándar. Al publicar html, puede facilitarnos las cosas publicando un enlace con su código de jsfiddle.net -

Ryan Murphy: En realidad estoy usando cakephp-TreeBehavior para construir el árbol. Es dinámico y puede tener diferente profundidad. -

ZippyV: Gracias por tu información. registrarse ahora. -

Tenga en cuenta que las personas son no es probable que lea todo ese código. -

1 Respuestas

Gracias a @ZippyV me recordó declarar el <!DOCTYPE> en él simplemente agregando una línea de código antes del <html> etiqueta, para que el navegador entre en modo estándar y el html sea válido.

Ahora IE8 lo muestra exactamente igual que Firefox.

contestado el 23 de mayo de 12 a las 03:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.