28220 sujets

CSS et mise en forme, CSS3

[resolu] Espace entre des DIV sous IE - Comment corriger ?

Salut !
Bon après plus d'une heure de recherches et d'essais, je ne parviens toujours pas à corriger mon problème...

Pourtant la structures est assez simple...
Voici la feuille de style :


body{
   margin-left: 30px;
   margin-right: 30px;
   margin-top: 0px;
   margin-bottom: 0px;
   background: #F0F0F0;
}

#cadre-exterieur_haut-gauche {
   height: 31px;
   width: 28px;
   background-image: url("design/img/bordure-haute_g.gif");
   float: left;}

#cadre-exterieur_haut-centre {
   height: 31px;
   background-repeat:repeat-x;
   background-image: url("design/img/bordure-haute_c.gif");}

#cadre-exterieur_haut-droite {
   width: 28px;
   height: 31px;
   background-image: url("design/img/bordure-haute_d.gif");
   float: right;}


et le code HTML

<div id="cadre-exterieur_haut-gauche"></div>
<div id="cadre-exterieur_haut-droite"></div>
<div id="cadre-exterieur_haut-centre"></div>


Il se trouve que sous Internet explorer il y a une zone de 2 ou 3 pixels qui séparent les 3 DIV
...
j'ai essayé de faire différents réglages (padding et margin) mais rien à y faire, je n'ai pas réussi à faire disparaitre le problème...

Voici des captures :
- Sous firefox
- Sous IE

D'où vient le problème et comment le régler ?
merci
@ +

PS : j'avais trouvé un solution pour que le problème ne soit plus visible (un DIV coneneur avec la même image de fond que "cadre-exterieur_haut-centre" mais ça reste du bricolage et il existe à mon avis une meilleur solution.
Je débute, si ma façon de faire n'est pas bonne, n'hésitez pas à me corriger, je suis prêt à revoir mes méthodes ! lol
Modifié par Graph-Site (05 Sep 2005 - 17:35)
Bonjour Graph-Site !

Un lien vers la page incriminée serait utile parce que là il manque des éléments essentiels à la compréhension de ton problème. Smiley smile
je n'ai pas le temps là désolé, je pars dans 2 min à mon entrainement,
je pense pourtant avoir donné tout les éléments, que manque-t-il, ma page ne comporte quasiment rien d'autre.

Je reformulerais ma question plus tard.

Merci pour votre réponse en tout cas Smiley cligne

@ +
Graph-Site a écrit :

je pense pourtant avoir donné tout les éléments, que manque-t-il, ma page ne comporte quasiment rien d'autre.

bah... On ne sait pas quelle DTD tu utilises (si DTD il y a) et puis on ne peut pas voir comment la page réagit quand on change la taille de la fenêtre. À moins que quelqu'un ait déjà eu ce problème spécifiquement, on a pas beaucoup d'éléments pour t'aider. Personnellement, je n'ai pas le temps de reproduire ton problème en local d'autant plus qu'il me manque les images.

C'est souvent plus difficile de bien formuler un problème que d'y trouver une solution.

Bonne chance.
Merci beaucoup pour ta réponse très pertinante Smiley smile
Je vais juste me permettre de te demander ce qu'est une DTD ???

J'ai résolu dans la pratique mon problème : 

<div id="cadre-exterieur_haut-centre">
<div id="cadre-exterieur_haut-gauche"></div>
<div id="cadre-exterieur_haut-droite"></div>
</div>
<div id="cadre-exterieur_haut-texte">Texte s'affichant entre les 2 "coins"</div>


et pour la CSS :
#cadre-exterieur_haut-gauche {
height: 31px;
width: 28px;
background-image: url("design/img/bordure-haute_g.gif");
float: left;
}

#cadre-exterieur_haut-centre {
padding: 0px;
margin:0px;
height: 31px;
background-image: url("design/img/bordure-haute_c.gif");
background-repeat:repeat-x;

}

#cadre-exterieur_haut-texte {
position: absolute; top:6px; left:58px;
}

#cadre-exterieur_haut-droite {
width: 28px;
height: 31px;
background-image: url("design/img/bordure-haute_d.gif");
float: right;}


Visuellement, ça donne exactement ce que je voulais Smiley cligne
Pour tester en ligne : http://graphsite.free.fr/graph-site/

Je voulais savoir (c'est ce qui était mon problème à l'origine) si il était possible d'avoir le même résultat sans avoir recours à un DIV supplémentaire (je suppose que je peux aussi le remplacer par un span...ou même un p) - celui que j'ai nommé "cadre-exterieur_haut-texte" ???

Si vous ne voyez pas, ce n'est pas grave, j'ai réussi à avoir ce que je voulais, même résultat sous IE et FireFox.

@ +
Bonjour,
Je suis en train de recoder mon design, en le simplifiant un peu.
Je retrouve ce problème, sous IE6, pour le cadre supérieur du titre de ma page : http://www.graph-site.net/divers/v2/

J'arrive à le corriger en mettent imbriquant les 2 DIVS en float dans la troisième, le problème ne soit voit plus.
Mais j'ai alors un problème de largeur, toujour sous IE6, qui me fait fortement penser que ce n'est pas la bonne solution.

La deuxième solution que j'ait trouvé est de mettre un margin de -3px, mais du coups, ce n'est pas l'idéal pour firefox et j'ai toujours ce même problème de largeur sous IE6...
Magré de nombreux essais et plusieurs recherche je ne parviens pas à corriger ce problème.

Voici le code actuel :
<div class="page-titre-gauche"></div>
<div class="page-titre-droite"></div>
<div class="page-titre-centre"><h1>Bienvenue</h1></div>
<div class="clear-both">&nbsp;</div>

<div class="page">Bienvenue</div>


et la css :

.page-titre-gauche {
	width: 28px;
	height:19px;
	float: left;
	background: url(../design/img/corps_hg.gif);
}

.page-titre-droite {
	width: 4px; 
	height:19px;
	float: right; 
	background: url(../design/img/corps_hd.gif); 
}

.page-titre-centre {
	height: 19px;
	background: url(../design/img/corps_hc.gif);
}


.page {
	padding: 0px; 
	background: #F0F0F0; 
	border-right: #225588 1px solid; 
	border-left: #225588 1px solid;
}


Pour avoir le code en sa totalité :
http://www.graph-site.net/divers/v2/
http://www.graph-site.net/divers/v2/design/style.css


Merci pour votre aide

@ +
Bonjour, J'ai réussi à corriger le problème bien que ce soit plutôt du bricolage je crois...

http://www.graph-site.net/divers/v2/

Le problème "d'espaces" sous IE n'est plus visible, mais comme je l'ai dis, la largeur de l'ensemble des trais divs en est affectées, je ne comprends d'ailleurs pas pourquoi...

Sous IE j'obtiens donc un décalage de quelques pixels avec le div qui se positionne en dessous...
Si je met un margin de 3px à gauche et 3px à droite sur l'élément du dessous,
cela devient parfaitement aligné sous IE mais on a donc le décalage inverse sous Firefox...

Voici le code de ce que j'ai actuellement : 
<div class="titre">
<div class="page-titre-gauche"></div>
<div class="page-titre-droite"></div>
<h1>Bienvenue</h1>
</div>
<div class="page">Bienvenue</div>


et la CSS :
.titre {
	height:19px;
	background: url(../design/img/corps_hc.gif);
}


.page-titre-gauche {
	width: 28px;
	height:19px;
	float: left;
	background: url(../design/img/corps_hg.gif);
}

.page-titre-droite {
	width: 4px; 
	height:19px;
	float: right; 
	background: url(../design/img/corps_hd.gif); 
}


Pourriez vous m'aider SVP afin que ce problème soit corrigé entièrement ?
Bonjour,

Il s'agit du bug d'IE Windows Three pixels jog (faire une recherche sur le forum pour le lien exact vers position is everything et les explications)

Pour qu'IE 5.x et 6.0 Windows se comporte comme Firefox, ajouter une CSS en commentaires conditionnels (voir FAQ du forum):

<!--[if lte IE 6]>
<style type="text/css">
.page {
height: 1%;
}
</style>
<![endif]-->


Si la correction peut ignorer IE5.0 et ne viser que IE5. et IE6.0, ajouter plutôt :

<!--[if lte IE 6]>
<style type="text/css">
.page {
zoom: 1;
}
</style>
<![endif]-->


<edit>Attention: le forum déforme la syntaxe de fin des commentaires conditionnels. Voir la FAQ pour rétablir la syntaxe correcte</>
Modifié par Laurent Denis (04 Sep 2005 - 10:47)
Cool, ça marche impeccable Smiley smile

Par contre, ce que je ne comprenait pas surtout, c'est pourquoi les 3 divs du titre étaint ainsi espacées avec mon premier code...
Enfin bon...tant que ça marche !


@ +
Concernant ton premier code, c'est le même bug d'IE qui joue : 3 pixels venus de nulle part (enfin, par tout à fait, pour autant qu'on le sache actuellement) qui s'intercalent :

- soit dans un élément en flux, comme une marge gauche appliquée à ses blocs de ligne si ceux-ci jouxtent un flottant à gauche, et s'il n'a lui-même aucune des propriétés CSS qui lui confèreraient le layout (un état des éléments propre au moteur de rendu d'IE)

- soit à l'extérieur d'un élément en flux, comme s'il était repoussé tout entier par le flottant qu'il jouxte à sa gauche, s'il a une des propriétés CSS qui confèrent le layout. C'était le cas de ton premier code, à cause du height appliqué à l'élément .centre (height et width confèrent également le layout.

Le pourquoi du comment des 3 pixels (et pas 5 ou 6) n'a pas été élucidé dans le détail, et il semble que les développeurs d'IE4.0, à l'origine du problème hérité par IE5.x et IE6.0, ne la connaissent pas eux-mêmes, d'après leurs dire. On sait seulement:

- qu'un élément doté de layout aura une influence sur les éléments voisins, tel que ce décalage. La propriété float fait partie de celles qui confèrent officiellement cet état de layout dans le système de rendu Microsoft : d'où ce bug, mais aussi la plupart des autres bugs d'IE liés aux flottants.

- qu'un élément doté de layout se comporte vis-à-vis des éléments voisins avec une plus grande indépendance que s'il n'en avait pas : cela explique pourquoi ce décalage se produit dans l'élément en flux s'i celui-ci n'a pas de layout, et en dehors du même élément s'il a le layout.

Dans les deux solutions données ci-dessus, les propriétés height et zoom font partie de celles qui confèrent le layout.

En fait, régler un bug CSS dans IE5.x 6.0 Windows consiste essentiellement à identifier l'élément auquel conférer le layout pour lui permettre de s'afficher sans subir une influence indésirable. Ou à trouver une astuce pour gérer le bug lorsque l'élément a déjà le layout à l'origine du bug, car celui-ci ne peut pas lui être retiré...

Voilà pour le peu qu'on peut dire en l'état actuel de l'art.
Modifié par Laurent Denis (04 Sep 2005 - 18:20)
Sujet clos
Aller à