Artícle original: Rejilla con lista y problema con Explorer per en Choan
Es vol aconseguir que donada una llista de caixes quedin encolumnades les imparells per una banda i les parells per l'altre però que les parelles imparell-parell comencin sempre a la mateixa alçada.
Donat un XHTML:
<ul>
<li class="imparell">Lorem...</li>
<li>Phasellus...</li>
<li class="imparell">Aenean...</li>
<li>Sed et...</li>
</ul>
Aplicant un CSS
ul {
margin: 0;
padding: 0;
list-style: none;
width: 400px;
}
li {
background: lightgreen;
width: 50%;
float: right;
}
li.imparell {
background: lightblue;
float: left;
clear: both;
}
Aquesta solució funciona per navegadors tipus Firefox, Opera i Safari però no pas per Internet Explorer.
Per fer reaccionar Internet Explorer de la manera esperada caldrà modificar les regles de la següent manera:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 400px;
}
li {
background: lightgreen;
width: 50%;
float: right;
_float: none;
}
li.imparell {
background: lightblue;
float: left;
clear: both;
_margin: 0 -3px 0 0
}
S'utilitza el mètode del guió baix per il·lustrar les propietats per Internet Explorer només per comoditat, no perquè es consideri millor.
Comentaris
Comentat per choan el 04/09/06
Un pequeño detalle: como IE7 presenta el mismo bug que sus hermanos pequeños, necesitamos un hack ad hoc que también le afecte. Así, en lugar de utilizar `_property: value;`, conviene utilizar `*property: value;` (a no ser, claro está, que la versión final de IE7 corrija el bug).
Comentat per are el 04/09/06
En principi l'ús d'aquest hack és per mostrar més facilment quines propietats són per l'IE. Posats a fer jo usaria comentaris condicionals :)
Comentat per choan el 05/09/06
Bueno, en cualquier caso, lo importante es tener en cuenta que IE7 (o al menos la beta 2, que es la que yo testeé) no resuelve el bug, y por tanto hay que aplicarle el mismo trapicheo.
En cuanto a comentarios condicionales versus hacks, es una cuestión que deberíamos resolver en Salsa Rosa XD
Comentat per pau el 19/09/06
Doncs jo ho faria aixi:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 400px;
}
li {
background: lightgreen;
width: 50%;
float: left;
display:inline; /*inocu, pero cura el bug de doble marge de IE*/
}
li.imparell {
background: lightblue;
float: left;
clear: left; /*en cas de que l'imparell sigui més alçada que el parell*/
}
Si entenc bé el cas del Choan, jo crec que aquesta manera d'implementar-lo es millor.
Comentat per are el 19/09/06
He provat la teva proposta en IE 6 i no funciona, les caixes parell-imparell no queden aliniades...
Comentat per pau el 19/09/06
Doncs, ara que estic a la feina i que tinc acces al IE, he probat el codi i jo obtinc els mateixos resultats en ambdós navegadors: les columnes imparelles a l'esquerra, les parelles a la dreta i cada columna alineada per dalt amb la seva oposada?
http://pau.santesmasses.net/work/proba.html
A veure si és que ho he entés malament!
Comentat per are el 19/09/06
El teu exemple es veu bé però falta el cas problemàtic; si repliques la darrera parella de
liveuras que no ho fa bé.És a dir, quan l'ítem més llarg és l'imparell és quan no es veu bé.
Comentat per pau el 20/09/06
Ah! ara veig el problema...