28172 sujets

CSS et mise en forme, CSS3

Tableau avec balise DIV : problème IE

Bonjour,

Je rencontre un problème avec internet explorer 8 avec le code suivant :


<style>
div {width: 50px;height: 50px; position: relative;}
</style>



<body>
<div style="background-color:#F00; float:left;"></div>
<div style="background-color:#A00; float:left;"></div>
<div style="background-color:#600; float:left;"></div>
<div style="background-color:#0F0; float:left; clear:both;"></div>
<div style="background-color:#0A0; float:left;"></div>
<div style="background-color:#060; float:left;"></div>
<div style="background-color:#00F; float:left; clear:both;"></div>
<div style="background-color:#00A; float:left;"></div>
<div style="background-color:#006; float:left;"></div>
</body>



Je souhaiterais créer un tableau 3x3.
Firefox => ok
Chrome => ok
IE => ko

Je n'arrive pas à trouver d'explication ... Smiley sweatdrop

Merci,
Modifié par Tbea (26 May 2011 - 16:08)
Bonjour,

S'il s'agit de faire un tableau, pourquoi ne pas utiliser...un tableau ?
Pas le temps ni les moyens physiques de tester ton code là tout de suite (ce code, c'est juste pour tester sur le coin d'une table (tiens, on en parlait...), non ?), mais si tu places du contenu dans ces conteneur vide, cela change t-il quelque chose ?
Ta page a-t-elle une déclaration de Doctype ? (d'où l'intérêt d'une page en ligne...)

A plus...
Bonjour,

Car je souhaite entre autre modifier la hauteur des cellules. (le doctype utilisé ne le permet pas)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Ce code est un code d'exemple et illustre parfaitement mon problème.

Merci,
Administrateur
Hello,

Tbea a écrit :

Car je souhaite entre autre modifier la hauteur des cellules. (le doctype utilisé ne le permet pas)

Attention à ne pas confondre la structure (HTML) et la présentation (CSS).
Quelle est la fonction de ces éléments ?
La réponse à cette question impliquera le choix des balises. Seulement ensuite vient la couche graphique à apporter.

Tbea a écrit :
Ce code est un code d'exemple et illustre parfaitement mon problème.

Peut-être pour toi, mais les autres membres doivent-ils deviner ? Ou pire, s'amuser à recopier le code ?
Très honnêtement, un exemple en ligne te faciliterait les choses.
Ok, je part du principe qu'un exemple du problème faut mieux qu'un long discours.
Je n'ai pas compris la philosophie du forum.

Sous Chrome et Firefox, j'ai bien un tableau 3x3 (le résultat que je souhaite)
Attention, le nom dans les cases corresponds à la couleur.

+-------+-------+-------+
|  F00  |  A00  |  600  |
+-------+-------+-------+
|  0F0  |  0A0  |  060  |
+-------+-------+-------+
|  00F  |  00A  |  006  |
+-------+-------+-------+


Mais sous IE8 (non testé avec d'autres IE), j'ai un tableau 7-1-1

+-------+-------+-------+-------+-------+-------+-------+
|  F00  |  A00  |  600  |  0A0  |  060  |  00A  |  006  |
+-------+-------+-------+-------+-------+-------+-------+
|  0F0  |
+-------+
|  00F  |
+-------+

Modifié par Tbea (26 May 2011 - 17:09)
Administrateur
A priori, on ne connait toujours pas la fonction de ces éléments.

J'aurais tendance à croire qu'il s'agit d'élément de nature tabulaire (des couleurs), donc à adopter une structure de tableau HTML... et ça tombe bien puisque tu obtiendras exactement le bon affichage partout.
a écrit :
Je n'ai pas compris la philosophie du forum.

Elle est simple : plus tu donnes d'informations (visuel, code, page en ligne), plus tu as des chances de te faire comprendre et aider Smiley cligne
J'ai abandonné l'usage d'un tableau HTML (TABLE) car mon DOCTYPE ne permet pas de donner une hauteur à mes cellules. De même, je souhaiterais faire une modification dynamique des cellules.
Administrateur
Tbea a écrit :
J'ai abandonné l'usage d'un tableau HTML (TABLE) car mon DOCTYPE ne permet pas de donner une hauteur à mes cellules.


C'est quoi cette histoire ?!

Je viens de tester le code suivant sans aucun problème (et dans ton doctype) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
  </head>


  <body>
  	
  	<table>
  		<tr>
  			<td style="height: 300px; background: red; color: white">Hopla</td>
  		</tr>
  	</table>
    
  </body>

</html>
Salut Tbea, j'ai rencontré exactement le même problème Decalage-horizontal-des-flottants-dans-ie7

Le problème d'ie7/8 est qu'il décale verticalement les blocs quand il y a de la place.

Une solution consiste à mettre tes blocs dans un div ajusté à la taille de tes 3 colonnes et empêcher ainsi que le 2ème élément de la seconde ligne se barre à la fin de la 1ère ligne.

Mais cela ne fonctionnera bien qu'avec des blocs de la même hauteur.

Pour le reste, je t'invite à lire la fin de ma question sur Decalage-horizontal-des-flottants-dans-ie7. Il semble que c'est tout ce qu'on peut faire actuellement.
Merci à vous deux,

@Raphael, mon problème de tableau venait d'un autre soucis.

Ceci dit, cela n’empêche pas la résolution de ce problème.
Même si mon exemple n'a pas de finalité, je souhaiterais comprendre le non-fonctionnement entre les navigateurs.

@Paskaracal, je regarde cela, merci pour ta réponse.
Sujet clos
Aller à