Problème de compatibilité IE6/Firefox

**Shinoda00** · 16/07/2009, 11h54

Bonjour,

J'ai un problème dans ma feuille de style CSS. Voici ce que je souhaite obtenir: Une page avec un haut-de-page et un pied-de-page, ainsi qu'un calque central composé d'un menu à gauche et du contenu à droite.

Mon fichier CSS:
http://comon37.free.fr/div.css

La page HTML:
http://comon37.free.fr/div.php

Mon problème:

- Sous Firefox, "div#bann2" ne s'affiche pas (http://comon37.free.fr/firefox_design.jpg), à la place on a du blanc.
Cela est embêtant dans le cas où le calque div#bann2b est plus grand que le calque div#bann2a.

- Sous IE6, cela fonctionne mais par contre l'ensemble des calques ne sont pas centrés sur la page.

La seule solution pour le premier problème serait de créer un autre calque contenant "div#bann2", "div#bann2a", "div#bann2b" mais cela serait lourd d'avoir deux niveaux de calque. Et puis, si cela marche avec IE6, c'est que la solution ne doit pas être loin.

Par contre l'histoire du centrage, mystère...

Merci pour vos réponses.

**Macmillenium** · 16/07/2009, 12h28

Bonjour,

Envoyé par Shinoda00

- Sous Firefox, "div#bann2" ne s'affiche pas (http://comon37.free.fr/firefox_design.jpg), à la place on a du blanc.
Cela est embêtant dans le cas où le calque div#bann2b est plus grand que le calque div#bann2a.

Rajoute un overflow:hidden sur #bann2 pour conférer un nouveau contexte de formatage bloc (recherche sur le terme) et englober les flottants.

Envoyé par Shinoda00

- Sous IE6, cela fonctionne mais par contre l'ensemble des calques ne sont pas centrés sur la page.

Tu es en mode Quirks déclenché par ton doctype HTML4 Transitional incomplet (sans URI) :

Code :

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

1
2
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Dans ce mode de rendu, IE7- n'interprète pas les marges automatiques.

Rajoute donc un doctype complet :

Code :

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

1
2
3
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">

Sous IE7 le conteneur englobe ses enfants flottants puisqu'il est doté d'un width:900px; qui confère le layout (encore une recherche sur le terme).

**Shinoda00** · 16/07/2009, 12h41

Merci pour la méthode overflow:hidden, cela marche impec.

Pour le problème sur IE, ceci marche également (après recherche) :

Code :

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

1
2
3
body {
  text-align: center; /* pour résoudre le bug de centrage de IE */
}

Merci en tout cas pour la réponse rapide. Je mets le topic en "Résolu".

**Macmillenium** · 16/07/2009, 13h13

Envoyé par Shinoda00

Code :

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

1
2
3
4
 
body {
  text-align: center; /* pour résoudre le bug de centrage de IE */
}

Merci en tout cas pour la réponse rapide. Je mets le topic en "Résolu".

Petit conseil tant que tu débutes : Commence toujours par chercher l'origine du problème.

Comme expliqué, ton doctype HTML4 Transitional incomplet bascule les navigateurs graphiques en mode de rendu Quirks (à lire attentivement si tu veux progresser).
text-align:center n'est pas censé centrer des boites de blocs, c'est l'un des nombreux bugs d'IE en mode Quirks.

Et la solution :

Envoyé par Macmillenium

Rajoute donc un doctype complet :

Code :

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

1
2
3
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">

Problème de compatibilité IE6/Firefox

CSS

Discussions similaires

Partager

Partager