[Résolu] IE7 - inline-block

Bonjour,

Je réalise actuellement un thème pour Dotclear 2 avec un affichage un peu spécifique :

Premier article : en haut, occupant toute la largeur
Billets suivants : En dessous en 2 colonnes

Sur Firefox, l'affichage est correct, mais sur IE7 l'affichage en colonnes ne semble pas fonctionner. J'ai réduit la taille des blocs en pensant que ça venait de là, mais nada.

Voici le site de test pour vous faire une idée.

Voici aussi la feuille de style, si une âme charitable veut bien m'aider à sortir de l'impasse.

Merci !

/* Page d'accueil - Billets
-------------------------------------------------------- */

div.cell {
	width: 285px;
	display: -moz-inline-box;
	-moz-box-orient: vertical;
	display: inline-block;
	vertical-align: top;
	word-wrap: break;
	height: 100%;
        margin: 0;
        padding: 0;

}
* html div.cell {
	display: inline; /* Pour IE6 */
}

.dc-home .cell .inside-bloc{
margin: 0 20px 60px 0;
padding: 0;
position: relative;
display:block;
}

.dc-home .cell.odd .inside-bloc{
margin: 0 0 20px 20px;
}

.dc-home .cell .post-content{
font-size:0.9em;
}

.dc-home .cell .post-title{
font-size:1.2em;
letter-spacing: 0;
}

.dc-home .cell .read-it{
position:absolute;
margin: 10px 0 10px 0;
}

.dc-home .cell .post-information{
border-bottom:1px solid #9F978B;
padding: 0 0 4px 0;
color: #9F978B;
font-size: 0.9em;
}

.dc-home .cell .post-information a{
color: #9F978B;
text-decoration:none;

}

/* Page d'accueil - Premier billet
-------------------------------------------------------- */

.dc-home .cell.odd.first{
width:90%;
padding:5%;
border: 1px solid #9F978B;
border-width: 1px 0;
margin: 0 0 30px 0;
background: #CFCAC2;
}

.dc-home .cell.odd.first .read-it{
margin: 10px 0 0 0;
position:absolute;
}

.dc-home .cell.odd.first .post-content{
font-size:1.2em;
}

.dc-home .cell.odd.first .post-title{
font-size:1.8em;
letter-spacing:-2px;
}

.dc-home .cell.odd.first .post-information{
border: 0;
padding: 0;
font-size:1.1em;
}

Modifié par l.nicolas (11 Sep 2008 - 18:44)

Hello l.nicolas et bienvenue ,

c'est normal que ça ne fonctionne pas car dans IE6-7 le inline-block est réservé aux éléments 'en-ligne'.

Il me semble que tu pourrais t'en sortir avec une succession de DIV en float:left ou bien en faisant 2 conteneurs "colonnes" (la première en float:left et la seconde avec un margin-left correspondant).

A+

Bonjour,

Bon ! En fait j'étais déjà passé par les float:left, mais on m'a conseillé d'utiliser ce code. Je pensais que ce bout de code réglait le problème :

* html div.cell {

	display: inline; /* Pour IE6 */

}

Mais en fait, non ?

Euh... non !

Ce code permet juste de corriger un bug dans IE6 : le doubled margin bug qui double la marge d'un élément flottant si elle est "du même côté" que le float (en clair si float:left + margin:left)

Tu devrais essayer les flottants puique tes divs sont de même taille ça ne devrait pas poser de problème. En complément voir cet article : Organiser une série de flottants en colonnes.

Merci pour le dernier lien ! En passant par un float:left pour les blocs pairs et un clear:right sur les blocs impairs, le problème est résolu !

l.nicolas a écrit :

le problème est résolu !

Alors merci de l'indiquer en rajoutant un [Résolu] dans le titre en éditant ton premier post.