[résolu] Des blocs divs qui ne se collent pas sous ie

Bonjour à tous,

J'ai un petit problème d'affichage que je connais pour l'avoir déjà eu mais là, rien à faire, je ne trouve pas pourquoi.

Voici une image pour mieux comprendre :


On peut voir que les bloc div contenant les bordure de cadre ne se colent pas. Cela ne se produit que sous ie. D'habitude c'est un problème de padding ou de margin mais là, je ne vois pas.

Chaque "cadre" est composé de trois bloc divs. Le cadre du haut contient l'image de fond du haut du cadre, celui du milieu, le milieu et celui du bas, et bien la bas du cadre.

Dans le cadre du milieu j'ai un titre de niveau h1.

Voici le code css appliqué à tous les éléments :

*{
margin : 0;
padding : 0;
font-family : arial,verdana ;
}

Voici le code appliqué aux blocs div :

/*conteneur gauche - fichier page.php dans dossier class*/
#conteneurBlocsDeGauche{
float : left;
width : 210px;
margin-left : 5px;
margin-top : 10px;
}

#conteneurBlocsDeGauche .haut {
height : 13px;
width : 210px;
background: url('../../../images/front_office_design/blocs_gauches/haut_cadre210x10.jpg');
}

#conteneurBlocsDeGauche .milieu {

background: url('../../../images/front_office_design/blocs_gauches/milieu_cadre210x1.jpg');

}

#conteneurBlocsDeGauche .bas {
height :10px;
width : 210px;
background: url('../../../images/front_office_design/blocs_gauches/bas_cadre210x10.jpg');
}

Voyez vous un soucis ?

Merci
Modifié par sylvainbucule (28 Aug 2007 - 20:27)

Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum.
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution avec uniquement un petit bout de code css.

j'ai voulu faire simple en ne proposant que quelques éléments.

Voici la page concernée (il manque un pilote, mais ce qui s'affiche est suffisant pour voir ce qui ne va pas)

la page en question ici


et le code css :

/*******************************************************************************
 *
 *   PROPRIETES COMMUNES
 *
 ******************************************************************************/   

*{
margin : 0;
padding : 0;
font-family : arial,verdana ;
}

body {
font-size : 12px;
color : #003399;
background : #ccccff;
}


/*******************************************************************************
 *
 * LES BLOCS DIV
 *
 ******************************************************************************/


/* bannière - fichier page.php dans dossier class*/
#fondBanniere {
background : url('../../../images/front_office_design/design_general/bout_banniere.jpg');
width : 100%;
height : 90px;

}

/* bannière - fichier page.php dans dossier class*/
#banniere {
width : 1024px;
height : 90px;
background-image: url('../../../images/front_office_design/design_general/banniere_infogecom.jpg');
}

/*conteneur de conteneur*/
#conteneur{
width : 1024px;
background-image: url('../../../images/front_office_design/design_general/fond_page.jpg');
margin-left: auto;
margin-right: auto;
}

/*conteneur gauche - fichier page.php dans dossier class*/
#conteneurBlocsDeGauche{
float : left;
width : 210px;
margin-left : 5px;
margin-top : 10px;
}

#conteneurBlocsDeGauche .haut {
height : 13px;
width : 210px;
background: url('../../../images/front_office_design/blocs_gauches/haut_cadre210x10.jpg');
}

#conteneurBlocsDeGauche .milieu {

background: url('../../../images/front_office_design/blocs_gauches/milieu_cadre210x1.jpg');

}

#conteneurBlocsDeGauche .bas {
height :10px;
width : 210px;
background: url('../../../images/front_office_design/blocs_gauches/bas_cadre210x10.jpg');
}



/*conteneur droit - fichier page.php dans dossier class*/
#conteneurBlocsDeDroite{
margin : 10px;
width : 700px;
margin-left : 230px;

}

#conteneurBlocsDeDroite .haut {
height :13px;
width : 700px;
background: url('../../../images/front_office_design/blocs_droits/haut_cadre700x13.jpg');
}

#conteneurBlocsDeDroite .milieu {

background: url('../../../images/front_office_design/blocs_droits/millieu_cadre700x1.jpg');


}

#conteneurBlocsDeDroite .bas {
height : 11px;
width : 700px;
background: url('../../../images/front_office_design/blocs_droits/bas_cadre700x11.jpg');
}






/*bloc 1 et 2- fichier page.php dans dossier class*/
#divMenu, #bloc1, #bloc2{
padding : 0 15px 0 15px;

}

/*************Liens********/
/* pour les liens du menu */
.lienMenu a{
display : block;
margin-left : 25px;
padding-left : 3px;
line-height : 22px;
text-decoration : none;
}

.lienMenu a:link, .lienMenu a:visited {
color : #000099;
font-weight : bold;
}

.lienMenu a:hover{
background : #000099;
color : white;

/******paragraphe******/
p {
line-height : 20px;
margin-top : 10px;
}


/* p entourant les liens du menu*/
p.lienMenu {
clear : left;
margin-top: 10px;
}
}

Merci
Modifié par sylvainbucule (28 Aug 2007 - 13:16)

Ne voyant pas de réponse, je remet les choses à plat avec du code simplifié.
J'ai supprimé tout le css et gardé que l'élément qui pose pb à l'affichage.

Voici le code html:

<div id="conteneurBlocsDeGauche">

<div class="haut"></div><!-- fin div haut -->/** ce div contient le bord haut du cadre ***/

<div id="divMenu" class="milieu"> /* ce div contient le contenu et l'image du milieu du cadre*/

<h1>Menu</h1>
<p>Accueil</p>
<p>Cours / TP / Exercices></p>
<p>Cahiers de texte</p>

</div><!-- fin div milieu -->

<div class="bas"></div><!-- fin div bas -->/** ce div contient le bord bas du cadre ***/

</div><!-- fin div conteneurBlocsDeGauche -->

A ce moment là j'obtient cela :


Ensuite je rajoute les éléments css suivants :

#conteneurBlocsDeGauche{
width : 210px;
border : solid 1px black;
}

#conteneurBlocsDeGauche .haut {
height : 13px;
width : 210px;
background: url('../../../images/front_office_design/blocs_gauches/haut_cadre210x10.jpg');

}

#conteneurBlocsDeGauche .milieu {
border : solid 1px red;
}

Dans l'exemple, je n'ai mis qu'un bord de cadre, ça suffit pour voir le problème d'affichage. Donc après css, j'obtiens sous ie6 :


Comme vous pouvez le voir, le div du milieu n'est pas collé au div "haut" alors que padding et margin sont à 0. L'image se répète alors qu'elle ne fait que 13px de hauteur et que je définie une hauteur de 13px au bloc qui la contient. J'ai déclaré mon doctype et je suis en mode de respect strict des standards.
Ce problème n'est constaté que sous ie6 apparemment.

Depuis ce matin je cherche en vain, help me
Modifié par sylvainbucule (28 Aug 2007 - 18:18)

Argleeeuh, j'ai essayé plein de trucs, et j'arrive pas à trouver la solution.
Le problème peut se simplifier à ça :

<style>
#div1{
	background:blue;
	height:10px;
}
#div2 {
	background:red;
	height:3px;
}
</style>

<div id="div1">
	<div id="div2">...</div>
</div>

Ce qui devrait, normalement, faire un rectangle bleu qui contient un rectangle rouge de 3px de haut.

Bon, ça le fait sous FF, mais IE6 en veut toujours pas, parce que IE6 ne peut pas réduire la hauteur d'un bloc à une hauteur inférieur à son line-height. Si je passe le line-height à 1px, j'ai bien ma barre de 3px, mais j'ai encore un espace en dessous...

J'avoue que je sèche sur ce cas de figure précis.

Tu peux toujours mettre ton image en fond de ton conteneur principal en -position: top left, -repeat:no-repeat et rajouter un padding-top de 13px, ça fera le même effet, sans les problèmes ^^

Mais quand même... rageant ce cas de figure...
Modifié par Tymlis (28 Aug 2007 - 19:37)

Merci pour tes conseils mais là j'avoue que j'étais sceptique.
L'espace de fonctionne pas (j'ai bien utilisé le  ) et les commentaires ont été supprimés. Mais cela ne change rien.

Tyllis à dit :

a écrit :


Ou encore mieux, et j'aurais du commencer par là, pourquoi ne pas mettre directement l'image de fond au #conteneurBlocsDeGauche ?

et bien tout simplement parce que le menu doit être extensible en hauteur.

Salut,

@Tymlis
Je n'ai pas suivi l'ensemble du post mais dans ton exemple si tu donnes un line-height: 1px à #div2 tout rentre dans l'ordre, c'est une petite chose connu pour ie6 qui pour des hauteurs inférieures à 15px (12 ou 15 je ne sais jamais) pose des problèmes.

bien vu ghost,

En fait le line-height 1px n'a pas fonctionné mais ça m'a donné l'idée de faire un font-size de 1px et là hop, plus de problème.

Mille merci à tous et à ce site merveilleux
Modifié par sylvainbucule (28 Aug 2007 - 20:27)

ghost a écrit :
Je n'ai pas suivi l'ensemble du post mais dans ton exemple si tu donnes un line-height: 1px à #div2 tout rentre dans l'ordre, c'est une petite chose connu pour ie6 qui pour des hauteurs inférieures à 15px (12 ou 15 je ne sais jamais) pose des problèmes.

C'est ce que je disais mais ça ne résoud pas "complétement" le probleme, #div2 passe bien à 3px de haut, mais #div1 reste à sa taille initiale.
Or, préciser un line-height:1px à #div1 causerait plus de problème qu'il n'en résoudrait donc ça ne me paraissait pas une bonne solution

Et bien joué pour le font-size:1px, j'y avais pas pensé !