28202 sujets

CSS et mise en forme, CSS3

Un souci d'héritage entre DIV sous Firefox... [Résolu]

Hello hello, je refais actuellement mon portfolio en ligne (http://www.caslantienne.fr) et je bute sur un comportement de Firefox que je trouve étrange.

J'ai déclaré un div d'id "header" et un autre d'id "baseline". Or un problème d'héritage fait que mon "baseline" prend la valeur de margin de mon "header".

Sur IE7 je n'ai pas ce comportement. Voilà ma source : 


<style>
body {
font-family : helvetica;
font-size : 0.7em;
background : #FFFFFF;
margin : 0;
padding : 0;
}
a {
color : #FFFFFF;
}
#menu a:link {
text-decoration : none;
color : #FFFFFF;
}
#menu a:visited {
text-decoration : none;
color : #FFFFFF;
}
#menu a:focus {
text-decoration : none;
color : #FFFFFF;
}
#menu a:hover {
text-decoration : none;
color : #FFFFFF;
}
#menu a:active {
text-decoration : none;
color : #FFFFFF;
}
#conteneur {
margin : 0;
padding : 0;
height : 100%;
}
#header {
border-top : 5px solid #9add26;
background-image : url(img/fond_header.jpg);
height : 216px;
color : #ffffff;
padding : 0;
margin : 67px 0 0 0;
}
#baseline {
margin : 0;
padding : 0;
float : right;
border : 1px solid #000000;
color : #FFFFFF;
}
#caslantienne {
margin : 0;
padding : 0;
position : absolute;
background-image : url(img/caslantienne_header.jpg);
width : 311px;
height : 287px;
left : 75px;
top : 1px;
}
#menu {
margin : 0;
padding : 0;
background-image : url(img/ray.gif);
height : 30px;
}
.font_menu {
font: bold 1.4em arial;
color : #9add26;
letter-spacing : 1.7px;
padding : 6px 0 0 4px;
}
</style>
</head>
<body>
 <div id="conteneur">
  <div id="baseline">CSS &amp; XHTML pour un webdesign standard</div>
  <div id="header"></div>
   <div id="menu">
    <div class="font_menu">Des <a href="">formations</a> rigoureuses 	et une <a href="">expérience</a> solide m'ont permis de mener à 	bien les <a href="">projets</a> suivants...
    </div>
   </div>
  <div id="caslantienne"></div>
 </div>
</body>
</html>


Quelqu'un a-t-il une idée ?

Merci !!!
Salut,

ben non... rien vu de tel Smiley rolleyes : avec l'option "Inspecter" de Firebug on a bien
a écrit :
#header {
margin: 67px 0 0;
}

#baseline {
margin: 0
}
et pas d'héritage...

A+
Salut Heyoan, je n'ai pas Firebug mais je rencontre bien le bug sur Firefox 2 et Netscape 8, par contre par sur Opera 9 (pourtant c'est le même moteur Gecko ??) et IE 7, ci-joint capture d'écran...

Tu as quelle version de MF ?

upload/13040-bugfirefox.jpg
Re',

j'utilise FF 2.0.0.6... mais je viens de comprendre ce que tu voulais dire Smiley murf !

Comme l'élément float devrait se positionner par rapport à son block parent on pourrait s'attendre à ce qu'il se réfère à #conteneur et pas à #header !

Quelqu'un de plus compétent pourra sans doute t'expliquer pourquoi cela se passe comme ça Smiley smile ... cela dit c'est un peu particulier puisque tu veux que ton div header se place en dessous donc "logiquement" il suffirait que ton #baseline soit dans un autre block (de 67px de haut par exemple Smiley cligne ) et le header se placerait comme il faut...

Je vais suivre ce fil pour voir si on te donne plus de précisions...

A+
Quel est le rendu voulu exactement? #baseline ne devrait pas être aussi bas?

Si c'est le cas, ton problème vient probablement d'une fusion des marges: le margin-top de div#header est transmis à div#conteneur, car ce dernier n'a ni padding ni border supérieurs.
Correction rapide:
div#conteneur {padding: 1px 0;}
div#caslantienne {top: 2px;}
caslantienne a écrit :
par contre par sur Opera 9 (pourtant c'est le même moteur Gecko ??)

Opera a son propre moteur de rendu, nommé Presto (moteur de rendu depuis la version 7.0, le précédent était Elektra). Presto a un support de CSS 2.1 plus complet que Gecko, par exemple.
Oui Heyoan, tu as tout compris Smiley biggrin

a écrit :
l'élément float devrait se positionner par rapport à son block parent on pourrait s'attendre à ce qu'il se réfère à #conteneur et pas à #header !


Florent, ta solution marche, trop fort Smiley cligne je vais lire le tuto que tu as proposé mais si j'ai bien compris en l'absence de déclaration spécifique (un padding par exemple) un div peut prendre la valeur d'un élément enfant de même spécificité... ?

Je creuse le sujet et merci de votre très précieuse aide ! Smiley murf
Modifié par caslantienne (16 Sep 2007 - 19:27)
caslantienne a écrit :
mais si j'ai bien compris en l'absence de déclaration spécifique (un padding par exemple) un div peut prendre la valeur d'un élément enfant de même spécificité... ?

Ça ne concerne que les marges. C'est le même principe qui fait que si tu places deux paragraphes en margin: 1em 0; à la suite, l'écart total entre les deux paragraphes ne sera pas de 2em (1+1) mais correspondra à la valeur la plus grande (1em). Ici, c'est la même chose mais avec des blocs imbriqués.

Si j'ai le code suivant: 
<div style="margin-top: 20px;"><div style="margin-top: 30px;"></div></div>
au final le div parent aura une marge de 30px, et le div enfant une marge de 0px, suite à la fusion des deux marges.

Voir aussi la spécification CSS 2.1, en faisant une recherche sur «collapsing margins». Smiley cligne
Salut Florent, ce sujet a beau être clos, je me suis rendu compte que sous IE 6 et 7 le padding de 1px du bloc conteneur n'était pas pris en compte. Encore un comportement zarbi d'IE ?

En tout cas j'ai trouvé sur ton site d'autres rustines Smiley smile dont celle qui consiste à appliquer un border transparent au bloc conteneur, et qui semble fonctionner avec IE 7. Pour la version 6 on verra demain au taf Smiley confus

Merci encore pour ton expertise !
Sujet clos
Aller à