Difference entre ie et ff

Bonjour et bonnee annee a tous.

Voila je suis en train de refaire le site de ma femme et j'ai un petit probleme de placement avec ie.

http://minouch.net/nouveausite/index.htm

Voici mon code css.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#00FF00;
background-image:url("images/redpattern.jpg");
}
#header {
height: 190px;
}
#menu{
height: 61px;
margin: 0px;
}
#conteneur {
position: relative;
width: 900px;
margin: 0 auto; 
}

#centre {
margin-left: 89px;
margin-right: 91px;
background-color:#0f0f0f;
}

#pied {
height: 30px;
}

p {margin: 0 0 10px 0;}

a{outline: none;} :focus{-moz-outline-style: none;}

img.centered {
   display: block;
   margin-left: auto;
   margin-right: auto }
   
img.bann{
   display: block;
   margin-top : 60px;
   margin-left: auto;
   margin-right: auto }
   

Donc l'image banniere est bien placee sur les deux browser, mais le bloc complet remonte sous ie, je suis un peu perdu la et je vois pas d'ou cela peu venir.

Davance un grand merci de votre aide ...
Modifié par cybercodes (07 Jan 2008 - 01:39)

Bonjour,

En fait, le rendu est problématique avec les deux navigateurs.

Les choses se passent ainsi:

1. Sous Firefox (et le résultat sera le même avec la plupart des navigateurs), tu as un bloc div#conteneur sans marge supérieure et qui donc devrait se trouver tout en haut. Ensuite un bloc div#header en hauteur fixe (190px) et sans marge supérieure non plus (même topo). Et ensuite une image en display: block avec une marge supérieure de 60px, ce qui fait descendre l'image... mais en fait non.

Visuellement, l'image est bien descendue, mais en fait c'est div#conteneur qui descend, car la marge se transmet de l'image vers div#header, puis de div#header vers div#conteneur. Si si, sans déconner, voir l'image suivante par exemple (en bleu, div#conteneur):



Le phénomène en jeu ici est un comportement tout à fait standard nommé la fusion des marges. On en parle ici:
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Du coup, si le contenu après le header est à environ 250px du haut de la zone de visualisation du navigateur, c'est parce qu'on a:
- d'abord la marge de 60px qui s'applique à div#conteneur;
- ensuite la hauteur de 190px de div#header.
60 + 190 = 250px. CQFD.

Il serait plus sain de travailler directement avec des marges sur div#conteneur, ou avec des marges sur div#header (plutôt que sur l'image) qui ne se transmettront pas par fusion des marges.

Si on garde la deuxième option, on peut faire:

div#conteneur {
margin: 0;
padding: 1px 0; /* empêche la fusion des marges */
}
div#header {
margin: 60px 0 30px 0;
height: auto;
}
div#header img {
display: block;
margin: 0;
}

2. Le rendu dans Internet Explorer.
Ça reste la même base, sauf que là la fusion des marges ne s'applique pas, comme par magie. Pourquoi donc? À cause d'un mécanisme obscur nommé le HasLayout, provoqué par la hauteur donnée à div#header (pour plus de détails, la FAQ du forum en parle).

En plus de ça, on a un deuxième bug en jeu dans IE6 (mais pas le 7): la hauteur de div#header n'est pas correctement prise en compte, et est considérée par IE6 comme une hauteur minimale plutôt que comme une hauteur fixe.

Donc dans IE6: div#header est bien collé en haut (pas de fusion des marges, à cause du HasLayout) et a une hauteur de 60px (marge) + 162px (hauteur de l'image), soit 222px au total. Puis vient le menu, directement collé en dessous.

Dans IE7: div#header est bien collé en haut (pas de fusion des marges, à cause du HasLayout), et a bien une hauteur figée à 190px. Du coup l'image dépasse au delà de div#header, et le menu qui n'est repoussé que par div#header et pas par ce contenu qui dépasse se retrouve à chevaucher l'image.


C'est fou hein, quatre lignes de code HTML, cinq lignes de CSS, et on obtient un cas d'école avec trois rendus différents dans les trois principaux navigateurs.


Pour finir sur un autre sujet, je signale au passage que le texte alternatif choisi pour les images est mauvais. Je pense que pour le menu c'est appelé à changer, mais pour la bannière je me fiche royalement d'avoir l'information «bannière» si je n'ai pas accès à l'image. Je préfèrerais avoir l'information «Minouch.net» par exemple.

Woawww ca c'est de la reponse....

un grand merci a toi pour toutes les infos, je vais regarder a cela ce soir pour regler ca.

Le texte alternatif n'est pas le definitif mais merci de l'information :d