28172 sujets

CSS et mise en forme, CSS3

Table-cell sous IE

Bonjour,

Je m'excuse si le sujet a déjà été traité, mais j'aimerai mettre en forme 2 div pour faire 2 colonnes de même hauteur. Je suis très attiré par la "méthode du table-cell" qui marche très bien sous firefox, opera et chrome. Je trouve cette méthode beaucoup plus naturelle que celle des "float & clear".

J'aimerai savoir s'il y a une méthode recommandée pour simuler le table-cell sous Internet explorer (que ce soit avec ie6, ie7 ou ie8).

Voici mon code pour l'instant :


#left, #right {
  display: table-cell;
}

#left {
  align: left;
  width: 120px;
  background: #f80;
}

#right {
  align: right;
  width: 580px;
  background: #ccc;
}

</style>

 <!--[ if IE]>
<style type="text/css">
?????
</style>
<![ endif ]--> 

<div id="left">blabla<br>blabla<br>blabla</div>
<div id="right">blabla</div>


Merci d'avance pour votre aide.

Fabien
Modifié par fabioushka (22 Jun 2009 - 21:14)
Bonjour,

fabioushka a écrit :
J'aimerai savoir s'il y a une méthode recommandée pour simuler le table-cell sous Internet explorer (que ce soit avec ie6, ie7 ou ie8).


A part les colonnes factices, où un vrai tableau, non.
J'ai finalement trouvé une solution sympa :
- J'utilise table-cell par défaut,
- Pour IE j'utilise les colonnes factices SANS "clearer".

Ca donne ceci :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>Bienvenue sur ma page web !</title>
  <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />

<style>

#ca {
  display: table;
  width: 780px;
  margin: 0 auto;
}

#ca-left {
  display: table-cell;
  vertical-align: top; /* pour opera */
  width: 200px;
  background: url(background.png);
}

#ca-right {
  display: table-cell;
  vertical_align: top; /* pour opera */
  width: 580px;
}

</style>

<!--[if IE]>
<style type="text/css">
#ca {
  background: url(background-colonne-factice.gif) repeat-y;
	overflow: visible;
	height: 1%;
}
#ca-left {
  background: url();
  float: left;
}

#ca-right {
  float: right;
}

</style>
<![ endif ]--> 

</head>
<body>


<div id="ca">
<div id="ca-left">blabla<br>blabla<br>blabla</div>
<div id="ca-right">blabla<br>blabla<br>blabla<br>blabla<br>blabla</div>
</div>

</body>
</html>


J'espère que ça pourra aider ceux qui comme moi galèrent avec le CSS...
Modifié par fabioushka (22 Jun 2009 - 23:20)
Oui, j'utilise égélement cette méthode. Seulement aujourd'hui, j'ai un nouveau souci : je ne peux pas définir la largeur de mes "fausses cellules" car je ne connais pas leur nombre...
Cela doit se comporter comme dans un "vrai tableau" : la largeur des cellules est proportionnelle a leur nombre. Par contre mon "faux tableau"/conteneur a une largeur fixe.
Pas de souci sous Firefox et IE8, mais IE7... (pour IE6, on verra plus tard Smiley sweatdrop )

div {display:table;width:940px;}
dl {display:table-cell;}
<!--[if IE]>
dl {float:left}


Si vous avez une idée, je suis prenneuse !!!
Par avance merci.
bonjour,

la technique des colonnes factices n'est pas utilisable dans le cas de colonne a largeur variable . Les alternatives pour IE jouant sur le layout passeront trés mal sur IE7 et de toute façon n'heriteront pas du comportement d'un tableau .

La seule solution est l'usage d'un vrai tableau pour les version d'IE7 et inferieurs ...
ou un javascript recalculant largeurs et hauteurs des dl , avec une mise en forme de base acceptable.

GC
Sujet clos
Aller à