28172 sujets

CSS et mise en forme, CSS3

Float - bug IE6 / IE7

Bonjour,
j'essaie de faire un bloc contenant des actualités :

a écrit :

<html>
<head>
<style type="text/css">
.infos {clear:both;background-color:#FFFAE6;}
.infos .entete {overflow:hidden; background-color:#fafafa;padding:3px 3px 3px 21px; height:20px;}
.infos h1 {float:left; font-size:13pt; margin:0; padding:0;background-image:none;}
.infos .date {float:right; font-size:10pt;margin:0; padding:0; line-height:15pt;}
.infos .actu {border-left:#B3B3B3 1px solid; border-right:#B3B3B3 1px solid;border-bottom:#B3B3B3 1px solid;clear:both;}
.infos h2, .infos p.desc {margin:0;padding:0 50px 0 11px;}
.infos div.more {position:relative; float:right;margin:0;padding:0 10px 5px 0;}
.infos h2 {font-size:11pt;padding-top:5px;}
.infos .actu p {color:#808080;}
.infos .actu .more a {color:#808080;text-decoration:underline;}
hr.clear{clear:both;visibility:hidden;}
</style>
</head>
<body>
<div class="infos">
<div class="entete">
<h1>Actualités</h1>
<div class="date">Vendredi 20 decembre 2010 12:29</div>
</div>
<div class="actu">
<h2>Mon actualité</h2>
<p class="desc">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>
<div class="more"><a href="#">voir</a></div>
<hr class="clear"/>
</div>
<div class="actu">
<h2>Mon actualité</h2>
<p class="desc">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>
<div class="more"><a href="#">voir</a></div>
<hr class="clear"/>
</div>
<div class="actu">
<h2>Mon actualité</h2>
<p class="desc">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>
<div class="more"><a href="#">voir</a></div>
<hr class="clear"/>
</div>
</div>
</body>
</html>


La mise en page fonctionne sur IE8 et firefox.
Mais IE6 et IE7 ont un comportement très bizarre : le texte ne s'affiche pas intégralement, et ce qui est affiché change selon le texte que l'on essaie de sélectionner avec le curseur (!).
D'ou vient ce "bug" ?
Bonjour,

Je doute que le problème vienne de HR (rendu différent ne veut pas dire bug).

Par contre, du doctype... c'est possible.
Modérateur
Bonjour,

Je n'ai pas le temps ce matin de vérifier d'où vient exactement le problème, mais tu peux déjà jeter un oeil à cette liste de bugs.

Ça me semble être le Peekaboo Bug. Intéresses-toi aussi au hasLayout.
Modifié par Tony Monast (14 Feb 2011 - 12:57)
Tony Monast a écrit :
Bonjour,

Je n'ai pas le temps ce matin de vérifier d'où vient exactement le problème, mais tu peux déjà jeter un oeil à cette liste de bugs.

Ça me semble être le Peekaboo Bug. Intéresses-toi aussi au hasLayout.


C'est bien ce bug la. En mettant width:100% à ma classe .actu (pour lui attribuer un hasLayout), ça marche.
Merci de votre aide.

PS : pour les <hr class="clear" />, j'avais vu ça sur le site openweb :

a écrit :
Le défaut du spacer est d'introduire dans le code HTML un contenu fictif à des fins de présentation…

Lorsque la boîte adjacente à la boîte flottante est suivie d'une coupure logique dans votre page (nouvelle section de texte…), il est préférable d'associer la propriété clear à un contenu réel. La ligne horizontale créée par la balise <hr /> peut jouer avantageusement ce rôle


Initiation au positionnement float
Modifié par cescarment (14 Feb 2011 - 14:06)
Sujet clos
Aller à