28220 sujets

CSS et mise en forme, CSS3

[Résolu]Problème d'affichage avec Internet Explorer et propriété floa

Bonjour,

J'ai un problème sur une page avec Internet Explorer.
Voici la page en question :
http://www.agriaffaires.com/test/pb.html

Sous Firefox, aucun problème, mais avec IE, si on est dans une fenêtre plus petite que le contenu de la page, alors ma marge rouge saute à certains endroits (au niveau des zones où il n'y a pas de bloc bleu) lorsque l'on scrolle avec les ascenceurs.

J'ai essayé pas mal de choses mais rien à faire.

Si quelqu'un pouvait m'aider, je lui en serais grandement reconnaissant
Smiley cligne

Merci,

@+

Fred
Modifié par frederic45 (22 Dec 2005 - 16:53)
Salut,

Je suis sous IE6 SP2 et je ne peux reproduire pas ton problème. L'affichage sous IE et FF est le même.
Modérateur
bonjour,
pour moi, j'avais des marges sous IE et tout etait bien collé sous Firefoxe.
en regardant le source de ton code, je me suis aperçu qu'il n'y avait aucun doctype.
j'ai refait ta page avec un doctype en xhtml et le css dans l'entete, pour obtenir un affichage identique et surtout m'assurer que les navigateurs traiterait la page de la même façon.
En ajoutant les commentaires conditionnel pour IE on fait fit de ce bug de 3 pixels Smiley smile , on fait en sorte que le div clear n'est pas 1em d'epaisseur et surtout pour faire en sorte que IE affiche tout (les bordures rouge et eventuellemnt le reste ), je met la page entiere par defaut en 
position:relative;
sauf html, ce qui me permet de conserver la barre de scroll si necessaire (c'est la solution la plus simple que je me suis touvé pour gere ces probleme, de je te vois, je te vois plus dans IE).

ta page refaite sans bug apparent:
<!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">
  <head>
    <title>IE et ses bug ,  grrr !</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
<!-- 

.conteneur{border:1px solid red; padding:15px;}
.vert {float: left; width: 60px; height: 200px; background-color: green;clear:left;}
.bleu {height: 50px; background-color: blue;margin-left:60px;}
.clear {height:0;clear:both;}
-->
/*]]>*/
</style>

<!--[if IE]>
<style type="text/css">
* {position:relative;}
html {position:static;}/* pour recupere le scroll */
.bleu {left:-3px;margin-right:-3px;}/* on recupere ici le bug de 3 px d'ie, sur le conteneur "contenu" */
.clear {overflow:hidden;}
</style>
<![endif]-->
  </head>

  <body>
<div class="conteneur">
		<div class="vert"> </div>
		<div class="bleu"> klhkljhlkh </div>
<div class="clear"></div>
		<div class="vert"> </div>
		<div class="bleu"> klhkljhlkh </div>	
<div class="clear"></div>	
</div>
</body>
</html>


voila, j'espere que cela vas t'etre utile.
a plus


<oups> j'espere ne pas proposé une solution de "bourin", j'avoue ne pas toujours bien savoir si un choix est bon ou si il cache/cree par coincidence un autre bug </edit>
Modifié par gcyrillus (20 Dec 2005 - 23:43)
Super, le coup du position:relative .

Tu me retires une fière chandelle du pied comme auraient dit nos amis les Nuls Smiley cligne

Par contre, je n'ai trop compris l'intérêt de mettre postion:static pour html.

@+

Fred
gcyrillus a écrit :
pour faire en sorte que IE affiche tout (les bordures rouge et eventuellemnt le reste ), je met la page entiere par defaut en 
position:relative;
sauf html, ce qui me permet de conserver la barre de scroll si necessaire (c'est la solution la plus simple que je me suis touvé pour gere ces probleme, de je te vois, je te vois plus dans IE).


Hum... A éviter. Pour compenser les effets de cette position relative systématique, dans une mise en page un peu plus fournie, tu risques surtout de te mettre à surcharger les styles pour IE. Il est préférable d'agir précisément sur la source d'un bug.
Sujet clos
Aller à