rendu différent entre IE et FF ?

**Louis Griffont** · 10/12/2009, 12h53

Bonjour,

Je débute en html, css pour faire un petit site perso et sans prétention.

JE regarde à droite et à gauche et essai de voir comment faire.

Je voulais déjà voir comment séparer ma page en plusieurs morceaux avec les "div".

J'ai crée ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* CSS Document */
div
{
  text-align:center;
}
div#bandeau 
{
  width:*;
  height:50px;
  background-color:#00CCFF;  
}
div#contenu
{
  width:auto;
  height:400px;
  background-color:#FFCC00;
}
div#piedpage
{
  clear:both;
  width:*;
  height:50px;
  background-color:#33FF99;
}
div#menu
{
  float:left;
  width:100px;
  height:400px;
  background-color:#FF6699;
}

et une page html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
  <link rel="stylesheet" type="text/css" href="./style/style-div.css">
  </head>
  <body>
    <div id="bandeau">
      <h1>Bienvenue sur le site de Louis Griffont</h1>
    </div>
    <div id="menu">
       Menu à la carte
    </div>
    <div id="contenu">
      <p>Le bla bla de ma page...</p>
    </div>
    <div id="piedpage">
      Pied de page
    </div>
  </body>
</html>

J'utilise normalement FF ! A la vue du résultat, j'ai regardé si j'obtenais la même chose sous IE.
Les 2 images ci-dessous donnent les résultats bien différents selon le navigateur !

Quelqu'un pourrait m'expliquer le pourquoi de la différence et ce que j'ai mal fait ?

**Bisûnûrs** · 10/12/2009, 13h01

J'imagine que le résultat attendu est celui de IE.

Le problème n'est pas évident à cerner pour un débutant, mais il est facilement repérable avec Firebug. Il provient d'un problème de fusion des marges (pour plus d'infos, faire une recherche). En effet, la marge haute de l'élément p de ton élément #contenu est reporté à cet élément, ce qui te donne un écart sur Firefox.
Tu peux corriger ce problème en rajoutant par exemple un overflow:hidden sur ton div #contenu.

Petite remarque au passage, width:* n'existe pas, si tu veux qu'un élément prenne toute la largeur disponible, c'est width:100%. Et dans ton cas il est inutile de préciser la largeur, puisque width:100% est la valeur par défaut des éléments block (ici les div).

**Louis Griffont** · 10/12/2009, 13h31

Merci de ces précisions.

Un autre point, le texte "Menu à la carte" m'affiche un caractère étrange à la place du "à". J'imagine que c'est l'accent qui ne lui plait pas, mais comment faire pour qu'il m'affiche correctement mes accents ?

Autre question. Si je met le "overflow:hidden" dans la partie "div" de mon CSS, est-ce que ça règlera tout ces problèmes d'affichage dans tout mes div définis après ?

**Bisûnûrs** · 10/12/2009, 15h10

Si tu as ce caractère "�" qui apparait à la place du à, c'est un problème d'encodage. Tu dois avoir mis un charset UTF-8 sans enregistrer ton fichier en tant que tel.
Par exemple, sur Notepad++ : Format > Encoder en UTF-8 (sans BOM).

Pour l'autre question, ça règlera ce problème en particulier et d'autres que tu pourrais rencontrer, sans doute, mais mettre overflow:hidden sur l'ensemble des div à mon avis ça te perturbera sans doute pas mal dans de nombreux autres cas vu que ce n'est pas le comportement normal attendu, donc à mon avis il est plus judicieux de régler ces problèmes au cas par cas.

@sebhm : Un padding sur le #contenu fait cet effet là aussi.

En faisant une recherche sur Google sur la fusion des marges, on a pas mal d'articles recensant ce problème et les différents moyens de le contourner.

Sur Firebug, dans l'onglet HTML, si tu fais pointer ta souris sur le div #contenu tu ne vois à priori rien, mais si tu fais pointer ta souris sur le premier p de ce div, tu verras que c'est cette marge (affichée en jaune) qui créé cet espace.

**sebhm** · 10/12/2009, 15h55

OK merci.
j'apprends des trucs !

**sebhm** · 10/12/2009, 15h04

Bonjour,

j'ai du mal moi aussi avec ce genre de spécificité !
un truc rigolo (ouais, rigolo n'est peut etre pas le terme adéquat

),
si tu ajoutes juste une bordure au bloc #contenu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border :1px solid black;

le probleme disparait car la fusion des marges ne se fait plus.

@bisûnûrs : comment vois-tu facilement le probleme avec Firebug ?
(j'ai un peu de mal à me servir correctement de cet outil)

pour ton dernier post :
je te conseillerais d'abord ce tres bon article pour gérer correctement le codepage.
Sinon, les caracteres spéciaux HTML sont là pour ca.
Enfin, pour la propriété overflow, ca peut régler tes problemes de fusion de marge, mais l'overflow Hidden a un rôle précis également et il ne faut pas que ca perturbe ta page

rendu différent entre IE et FF ? [CSS 2]

CSS

Vue hybride

Discussions similaires

Partager

Partager