Listas de definición de estilos: IE claro: error de

Estoy intentando diseñar una lista de definiciones correctamente. Hasta ahora tengo el estilo que quería en Firefox 3.5 e IE 8, pero no pude lograr que IE6 e IE7 se comportaran correctamente ... Ya he intentado cualquier tipo de truco y truco en el que podría pensar.Listas de definición de estilos: IE claro: error de

parece que el "clear: both" en la DT no funciona en IE < = 7 ...

A continuación se muestra la "página de prueba" que estoy usando. El marcado de la lista de definiciones está construido a propósito: quiero probar diferentes escenarios, como múltiples definiciones o una vacía.

Compruébelo en Firefox> 3.5 para ver cómo debe verse.

¡Salud!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
<style type="text/css"> 
    body { font-family: Arial; font-size: 62.5%; } 
    * { margin: 0; padding: 0; } 
    #main { font-size: 1.4em; } 
    dt { font-weight: bold; } 
    hr { clear: both; } 

    dl.aligned { width: 300px; } 
    .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; } 
    .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; } 

</style> 
    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd>1.1 definition</dd> 
    <dd>1.2 definition - very long to test wrapping</dd> 
    <dd>1.3 definition</dd> 
    <dt>Second title</dt> 
    <dd></dd> 
    <dd></dd> 
    <dt>Third title</dt> 
    <dd>3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd>6.0 definition</dd> 

    </dl> 
</div> 
    </body> 
</html>

Fuente

2010-05-07 Andrea

Podría poner esto en línea para nosotros por favor? – Tom

Todo está allí, realmente ... marcado y CSS. Sin embargo, ¿hay alguna herramienta en línea que permita subir pequeños fragmentos de código que recomiende? – Andrea

Lo que estás tratando de hacer no es una lista, es una tabla. Usa una mesa –

Trate de añadir position a sus elementos, absolute para la dl y relative para la dt. Podría funcionar ...

Fuente

2010-05-07 12:03:02 Kyle

Si el problema es que algunos elementos parecen "flotar hacia arriba", entonces hay un truco desagradable que puedes probar: pon un <div> con "claro: ambos" entre el final de un <dd> y el siguiente <dt>. Sé que suena estúpido, y por supuesto está roto HTML, pero es lo único que he encontrado que pone una "barrera" en el marcado para evitar que las cosas floten hacia arriba.

Fuente

2010-05-07 12:38:51 Pointy

Umh ... Sí, probablemente funcionaría. Sin embargo, estoy bien con los hacks y la solución en el CSS, pero no quiero estropear el marcado de la página. :) – Andrea

@Andrea, así que dije que era desagradable. No he podido encontrar ninguna alternativa, así que estaré atento a tu pregunta aquí. – Pointy

¿Has probado la solución definitiva?

que suelen utilizar esta revisión para todos mis proyectos por lo que acabo de crear una hoja de estilo separada sólo para él:

/* float clearing for IE6 */ 
* html .clear { 
    height: 1%; 
    overflow: visible; } 

/* float clearing for IE7 */ 
*+html .clear { 
    min-height: 1%; } 

/* float clearing for everyone else */ 
.clear:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; }

salvo que como clear.css e incluirlo en su margen de beneficio (o simplemente puede incluirlo en tu hoja de estilo). Luego, para usar, simplemente agregue una clase clara al contenedor padre de sus elementos flotantes, en este caso, su dl.

p. Ej.

<dl class"clear">

Fuente

2010-05-12 02:15:39 corroded

Lamentablemente, el problema aquí es diferente ... dt y dd no pueden borrarse como deberían ... el problema no está en el dl que contiene sino en los elementos que están dentro ... – Andrea

oh sí, también lo hace ¿Quiere decir que realmente tiene que seguir con ese marcado? Creo que sigue siendo un buen (y semántico) marcado si vas por la lista anidada: dt tiene a lo sumo un dd. si dt tiene muchas definiciones, use una lista desordenada para enumerarlas todas. – corroded

Esto debería funcionar, he agregado algunos colores de fondo para que pueda ver lo que está sucediendo. Tendrás que agregar una clase a cada primer dd y jugar con los diversos 'ancho' para que se ajusten a tu diseño.

<style type="text/css"> 
    body { font-family: Arial; font-size: 62.5%; } 
    * { margin: 0; padding: 0; } 
    #main { font-size: 1.4em; } 
    dt { font-weight: bold; } 
    hr { clear: both; } 

    dl.aligned { background-color:orange;width: 400px; } 
    .aligned dt {background-color:grey;clear:both;float: left; margin: 0 0 0.5em 0; width:150px} 
    .aligned dd {background-color:olive;clear:left;float: left; margin: 0 0 0.5em 150px; width: 190px; } 
.aligned dd.first {clear: none;margin-left:0} 

</style> 
    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd class="first">1.1 definition</dd> 
    <dd>1.2 definition - very long to test wrapping</dd> 
    <dd>1.3 definition</dd> 
    <dt>Second title</dt> 
    <dd></dd> 
    <dd></dd> 
    <dt>Third title</dt> 
    <dd class="first">3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd class="first">6.0 definition</dd> 

    </dl> 
</div> 
    </body>

Fuente

2010-07-26 12:21:07 lupalz

Creo que la mejor solución aquí es cambiar la estructura html. Si crea diferentes bloques dl.aligned, en lugar de solo uno, es bastante sencillo lograr lo que desea.

<dl> 
<dt></dt> 
<dd></dd> 
<dd></dd> 
</dl> 

<dl> 
<dt></dt> 
<dd></dd> 
<dd></dd> 
</dl> 

<dl> 
<dt></dt> 
<dd></dd> 
</dl>

Fuente

2010-11-09 11:23:55 bluantinoo

Esto funciona en IE7, no probado en IE6. Ajustar según sea necesario. Adapted from here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
<style type="text/css"> 
    body { font-family: Arial; font-size: 62.5%; } 
    * { margin: 0; padding: 0; } 
    #main { font-size: 1.4em; } 
    dt { font-weight: bold; } 
    hr { clear: both; } 

    dl.aligned { width: 300px; } 
    .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; } 
    .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; } 

</style> 

<!--[if lt IE 8]> 

    <style type="text/css"> 
    .aligned dt { float: left; clear: left; margin: 0 0 0.5em 0; width: 100px; } 
    .aligned dd { clear: none; float: none; margin: 0 0 0 100px; width: 190px; } 
    .aligned dt:after { content: ":"; } 
    </style> 

<![endif]--> 

    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd>1.1 definition</dd> 
    <dd>1.2 definition - very long to test wrapping</dd> 
    <dd>1.3 definition</dd> 
    <dt>Second title</dt> 
    <dd></dd> 
    <dd></dd> 
    <dt>Third title</dt> 
    <dd>3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd>6.0 definition</dd> 

    </dl> 
</div> 
    </body> 
</html>

Fuente

2010-11-13 00:09:29 juddlyon

Para aquellos que han llegado a través de esta en busca de una solución, tengo algo que funcione para individuales <dt>/<dd> pares (suponiendo el ancho de los dos elementos se suma a todo lo ancho de la <dl>.

Utilice el css mencionado anteriormente para todos los navegadores, excepto IE7.Para Internet Explorer 7, usar algo como lo siguiente:

.ie7 #home .news dt, 
.ie7 #home .news dd { 
    float: none; 
    display: inline; 
    zoom: 1; 
    vertical-align: top; 
}

Nota: Estoy usando los comentarios condicionales para apuntar IE7 esta manera. Utilice el método de orientación que prefiera para IE7 es enviar estas reglas. Soy consciente de que esto se desmorona horriblemente si agrega varios elementos <dd>, por lo que noté que solo funciona para pares de elementos. *

Fuente

2011-06-27 06:38:32 pnomolos

Yo diría que todo el código está roto. Como dijo @NickPyett en el comentario, debe formatearse como una tabla.

No se requieren hacks y todo se muestra como se desee.

th { 
 
    text-align: left; 
 
}

<table> 
 
    <tr> 
 
    <th scope="rowgroup" rowspan="3">First title</th> 
 
    <td>1.1 definition</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.2 definition - very long to test wrapping</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.3 definition</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Second title</th> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Third title</th> 
 
    <td>3.0 definition</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Fourth title - very long to test wrapping</th> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Fifth title</th> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Sixth title</th> 
 
    <td>6.0 definition</td> 
 
    </tr> 
 
</table>

Fuente

2016-05-18 07:45:25 tomasz86

Listas de definición de estilos: IE claro: error de

Respuesta

Cuestiones relacionadas