28172 sujets

CSS et mise en forme, CSS3

Flottant IE 8 et Firefox : lequel dit vrai???

Bonjour à tous :

Mon besoin est (relativement) simple : pouvoir simuler grâce aux CSS et quelques DIV, l'apparence des ports Ethernet d'un commutateur et de revenir à la ligne comme ce qui existe de visu.

Je joue avec les CSS depuis quelques temps pour des besoins ponctuels et j'avoue rester perplexe sur ce coup.

Promis j'ai cherché sur les forums, lu et relu le fonctionnement de float mais au final il reste un flou.

La fonction "float" sort l'élement du flux courant pour se caler à gauche toute il me semble.

J'avais cru comprendre par ailleurs que la fonction "clear" avait pour but d'annuler l'effet d'un float appliqué sur l'élément précédent.

Mais qu'est-il censé se passer au niveau du flux ensuite? Le dernier élément n'est-il pas censé suivre le flux courant en prenant pour référence l'élément ayant subi le "clear"?

L'explication en image :
Le rendu initial :
upload/24598-normal.JPG

CSS avec IE 8 :
upload/24598-IE.JPG

CSS avec FF : (celui attendu et logique à mon sens)
upload/24598-FF1.JPG

Le code CSS est le suivant : 


* {margin:0;padding:0;}

#cevModule
{

  margin-left:auto;
  margin-right:auto;
  width:1000px;
}


.toto
{
  float:left;
  width: 36px;
  height: 36px;
  margin: 2px;
  background-color:#789;
  color:#FFF;
}

#cevPortBaseTEther_1007_b
{
clear:left;
}


Le code XHTML : 

[quote]<!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="en" lang="en">

<head>
<link rel="icon" type="type/ico" href="favicon.ico" />
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<link rel="stylesheet" type="text/css" href="styles.css" />


</head>

<body>
<div id="cevModule">
<div id="cevPortBaseTEther_1005_b" class="toto">
1005
</div>
<div id="cevPortBaseTEther_1006_b" class="toto">
1006
</div>
<div id="cevPortBaseTEther_1007_b" class="toto">
1007
</div>
<div id="cevPortBaseTEther_1008_b" class="toto">
1008
</div>
</div>

</body>
</html>

Modifié par cedric94 (09 Feb 2010 - 17:34)
Bonjour

La première image est la plus logique pour moi, il va aligner toutes tes div de class toto à gauche.
Si tu veux que les 2 dernières reviennent à la ligne, tu peux mettre en largeur à ta div cevModule une largeur de 72 (2 cases) au lieu de 1000.

Après je ne saurais pas trop dire pourquoi sur IE8, une case revient à la ligne.

Bon courage

Lu
Modifié par Luleen (09 Feb 2010 - 17:11)
Ta capture d'écran sous IE 8 fournit un indice intéressant : tu testes sur un Intranet. Or, par défaut, IE 8 utilise le mode de rendu d'IE 7 pour afficher les sites Intranet. Pour y remédier, soit tu testes ton code sur un site qui n'est pas estampillé Intranet soit tu décoches la case concernant les sites Intranet dans le panneau Outils > Paramètres d'affichage de compatibilité.
Alors là Victor, je dis bravo, cela corrige bien le problème.

Donc si je comprends bien, le fait que IE 8 utilise le rendu de d'IE 7 pour afficher les sites Intranet signifie que IE 7 ne respecte pas non plus les standards CSS.

Mais pour le coup, je suis embêté car il faut que je demande à mes utilisateurs de faire de même.

Pire encore, officiellement nous sommes (encore) sous IE 6 donc je cherche surtout un moyen (un hack IE 6 peut-être) pour contourner le problème...

Des idées?
cedric94 a écrit :
Donc si je comprends bien, le fait que IE 8 utilise le rendu de d'IE 7 pour afficher les sites Intranet signifie que IE 7 ne respecte pas non plus les standards CSS.

Ça veut dire que Firefox a juste, IE8 a juste, IE7 a faux. Et quand IE8 utilise le moteur de rendu d'IE7 (pour certains sites et en fonction de critères précis), eh bien il a faux aussi mais c'est pas «vraiment» IE8. Smiley cligne

cedric94 a écrit :
Mais pour le coup, je suis embêté car il faut que je demande à mes utilisateurs de faire de même.

S'il s'agit d'un site internet «normal», non. Ici le problème vient du fait que tu testes sur un réseau local. S'il s'agit d'un intranet d'entreprise ou d'un site appelé à être visité sur un réseau local alors oui le problème se pose, et dans ce cas la solution consiste à utiliser l'en-tête HTTP X-UA-Compatible ou la balise META équivalente (je te laisser chercher de la doc à ce sujet).

cedric94 a écrit :
Pire encore, officiellement nous sommes (encore) sous IE 6 donc je cherche surtout un moyen (un hack IE 6 peut-être) pour contourner le problème...

Ça va juste pas être possible. Pour être compatible IE6-7 sur ce point précis, tu va devoir englober tes lignes de flottants dans un élément DIV en clear:both (ou autre moyen pour empêcher le dépassement des flottants).
Pas administrateur pour rien...

J'aime ces réponses claires et précises, et d'une manière générale, tomber sur des gens compétents et pointus, rares sur les forums malheureusement.

Je vais donc creuser du côté de l'en-tête HTTP X-UA-Compatible ou la la balise META équivalente et vous ferai un retour, promis Smiley cligne

Merci encore.
Sujet clos
Aller à