Espacement entre deux div [IE6]

Bonjour,

Après plusieurs recherches sur ce forum et malgré des posts dont l'intitulé me laissai présager une réponse à mon problème, me voila toujours au même point.
Pour faire simple, j'ai deux div imbriqués dans un troisième.

<div class="conteneur-vert float-left">

                <div class="entete">
                     <h2>R&eacute;f&eacute;rences de la fili&egrave;re bois de Loz&egrave;re</h2>
                </div>

		<div class="conteneur">
                     <div class="center">
                           <img src="/images/picto-collectivites.gif" border="0" />
                           <img src="/images/picto-entreprises.gif" border="0" />
                           <img src="/images/picto-particuliers.gif" border="0" />
                     </div>
		</div>
</div>

L'extrait de la feuille de style correspondant à tous ca

html, body, div, dl, dt, dd, ul, li, h1, h2, h3 {margin: 0; padding: 0; border: none;}

div.conteneur-vert {
	margin: 3px 10px 3px 10px ;
	font-size: 12px;
}
				
div.conteneur-vert h2 {
	font-size: 11px !important;
	font-weight: bold;
	color: white !important;
	padding: 5px 0 0 34px;
	height: 19px; 
        background: url(/images/charteCSS/conteneur-vert-picto.gif) no-repeat left top;
}			
									
div.entete {
	height: 24px;
        background: url(/images/charteCSS/conteneur-vert-entete.gif) repeat-x;
}
				
div.conteneur {
	background: #F8E5CF;
	padding: 5px;
	border-style: none solid solid solid;
	border-width: 1px 1px 1px 1px;
}

Et voici les différents résultats.

Sous FF et IE7 (pas de souci)
http://www.lozere-bois.net/ff.gif

Sous IE6 (cet espace qui n'a rien à faire la)
http://www.lozere-bois.net/ie.gif

Si quelqu'un a une idée cela m'aiderai bien
Modifié par pc07 (13 Mar 2007 - 16:43)

Mettre les margin à 0 pour toutes les div ?

Bonjour applemac et bienvenue dans la semaine internationale du "Haslayout".

Le concept du haslayout est comme le côté obscur de la force de IE !

Ca peut notamment venir avec les éléments positionnés avec Float et en contenant d'autres.

Voir cet article sur Blog and blues :

http://www.test.blog-and-blues.org/haslayout/trad_temp.html

JE ne suis pas la personne qui maitrse le plus le sujet , mais il me semble que ton problème vient de là

<commentaire additionnel non demandé >
pour rigoler jaune, essais d'augmenter la taille de ton texte si tu n'est pas cardiaque
<commentaire additionnel non demandé >

padding et margin à 0

div.entete {
        padding:0;
        margin:0;
	height: 24px;
        background: url(/images/charteCSS/conteneur-vert-entete.gif) repeat-x;
}

div.conteneur {
	background: #F8E5CF;
	padding: 5px;
        margin:0;
	border-style: none solid solid solid;
	border-width: 1px 1px 1px 1px;
}

deux petites questions cependant ... pourquoi mettre div.conteneur ? Il suffit de mettre .conteneur, la stipulation du "div" n'est pas d'usage.
Pourquoi mettre une valeur de 1px à un border-width qui a un border-style "none" ... là j'ai pas pigé ...

Merci pour vos réponses.

Concernant le point des marges à 0, cela est traité dans ma première ligne de ma feuille de styles

html, body, div, dl, dt, dd, ul, li, h1, h2, h3 {margin: 0; padding: 0; border: none;}

Ensuite pour répondre à ta question Gunner, en effet il serait plus judicieux de mettre 0, faute d'inattention.

Par contre concernant la stipulation du div.blablablabla je me suis souvent posé la question nécessaire? pas nécessaire? Dans l'absolu et dans mon cas cela ne me semble en effet pas nécessaire. Mais n'est-il pas plus "strict" de déclarer cela comme ca, si ca ne doit s'appliquer qu'a un DIV? Et est ce que cela à vraiment des conséquences dans un cas comme dans l'autre?

Voyez vous autre chose?
Modifié par pc07 (14 Mar 2007 - 09:26)

Salut,

Attention à ne pas trop s'avancer

Gunner4902 a écrit :
remplacer !important par /*important*/ ceci étant la seule syntaxe permettant d'introduire une annotation dans un CSS

L'instruction !important permet de spécifier une règle CSS qui ne sera pas écrasée par la suite, même si elle est redéfinie.

a écrit :
ne pas mettre <div class="conteneur-vert float-left"> float-left est du ressort de la CSS ou doit etre déclaré comme CSS et non balancé comme celà dans un div

Apparemment, il ne s'agit que d'une déclaration de classe "float-left", et non de styles sauvages. Il est tout à fait permis de déclarer plusieurs classes différentes pour le même élément, en les séparant par un espace dans l'attribut class.

a écrit :
pourquoi mettre div.conteneur ? Il suffit de mettre .conteneur, la stipulation du "div" n'est pas d'usage.

C'est vrai, mais il peut être utile de le préciser. Par exemple, si on veut que le texte de tous les éléments de classe "code" soit coloré en rouge, on écrira :

.code {
   color: red;
}

Si maintenant, je veux ajouter une image de fond pour les éléments de type block qui portent la classe "code" sans toucher aux éléments de type en ligne, je peux ajouter

div.code, p.code, pre.code {
   background-image: url(...);
}

Comme a répondu Thomas D., je ne balance pas float-left dans un div. float-left fait référence à un de mes styles. Mon conteneur prend donc les propriétés des classes conteneur-vert et float-left pour l'aligner à gauche.

l'attribut !important permet de passer outre (dans une certaine mesure) la hiérarchie des feuilles de styles (développeur, navigateur, utilisateur,... j'ai bien du en oublier une ou deux ). Mais également comme la souligner Thomas D. de ne pas écraser sa déclaration.

a écrit :
Sinon pour répondre à ta question div.conteneur désigne un class lié à un div, il serait sans doute plus judicieux de te référer à cette regle :
comportement css unique dans la page : id
comportement css répété dans la page : class

Je ne rentre pas dans ce cas la. Mon style s'applique uniquement à un div mais ce div n'est pas forcement unique dans ma page.

Bon mais sinon le point important c'est que cela fonctionne chez toi, je vais relire mon code à tête reposer pour une troisième fois. On verra bien

certainement à dans pas longtps

Après quelques tests, il semblerai que ce soit un problème de hauteur de mon h2.

Si je modifie la hauteur de cet élément (ou que je supprime toute déclaration de hauteur) ca se remet à coller. Plus d'espace entre la partie du haut, et celle du bas.

En partant de la, je redéfini toutes mes marges et hauteurs à 0 pour partir sur de bonnes bases et je recommence.

hop je redéfini la hauteur du bloc,
hop son padding suppérieur (histoire d'aligner un peu le tout )
et la horreur... toujours cet espace.

IE6 réserverait-il un espace inférieur par défaut? (qui serait autre qu'une marge) Mon problème serait-il dû à la gestion, par IE6, de l'espace occupé par le contenu lui même?

J'ai re-vérifier maintes fois mes marges, vérifié les éventuels problèmes de fusion de marge mais rien, testé avec calcul en boites standard ou microsoft, mais ca ne change pas grand chose

Thomas D. a écrit :
Salut,
Attention à ne pas trop s'avancer

Mea culpa, mais au moins j'aurai appris des choses

As tu essayer de mettre une valeur par exemple height:1% à ta div du bas?

a écrit :
As tu essayer de mettre une valeur par exemple height:1% à ta div du bas?

Je ne l'avais pas fait et je viens d'essayer mais pas mieux

Sinon question subsidiaire qui n'a absolument rien à voir avec le sujet initial.

Savez vous pourquoi lorsque je poste un nouveau message sur le fofo alsacreations, je perds la feuille de styles?

Je m'expliques :
Sous FF, fofo parfait, la feuille de styles est là. Je post un message, la feuille de styles disparaît et la, plus moyen de consulter le forum avec sa mise en page sous FF.

Je test sur IE7, la mise en forme y est. Je réponds à un post, hop la feuille de styles n'est plus appliquée

Et plus moyen de le consulter normalement.