Page OK sur Firefox et la cata sur IE

Bonjour à tous,
Je débute en css avec mon premier site. J'ai utilisé comme base les gabarits d'Alsa pour tenter la mise en page de ce qu'a fait le graphiste. Tout se passe bien jusqu'à ce que fasse un contrôle sur Internet Explorer, et là... Patatrac ! Tout est décalé ! J'ai regardé sur les validateurs W3C pour le XHTML et les CSS, rien d'alarmant pourtant...
L'adresse est ici :
http://www.cobaye.in/bruno/modele10.html

Bonjour,

Personnellement, j'ai l'impression que c'est la cata sous FF3.6 : les blocs se superposent un peu à la rache...

Bonjour

Même remarque que Laurie-Anne, je comprends pas trop la collection de borders de toutes les couleurs fait-elle parti du design ou est-ce là juste pour le développement pour délimiter tes divs ?

Sous IE7 le problème majeur chez moi est ta div secondaire2 qui est décalée en bas. On dirait qu'elle n'a pas assez de place. En zoomant à fond (screen ci dessous) tu te rends compte que les pixels de tes borders font que la place qui lui reste est insuffisante, du coup, c'est logique qu'elle se balade en bas.



As-tu essayé d'enlever les border pour voir si la div se replace correctement ? As-tu essayer de diminuer la taille de principal3 juste pour voir si ça ne règle pas le problème ?
Modifié par saiko_sama (11 Jun 2010 - 12:10)

Merci pour vos réponses, ça m'a donné du courage.
J'ai réduit le padding pour les div incriminées, et ça a enlevé les décalages.
Du coup j'ai enlevé les borders que j'avais mis pour y voir un peu plus clair
Par contre, sur Safari (avec PC) il y a carrément le bas du site qui disparaît !! ça le faisait déjà avant... C'est quand même problématique car ceux qui utilisent Safari sont quand même nombreux, surtout sur MAC
waw c'est décidément plein de pièges l'intégration, faut que je revoie les bases

Ha oui c'est vachement mieux sans les borders

Pour safari, tu as un overflow:hidden sur #centre2 , je ne sais pas si ça joue, mais peut être un début de réponse.

Ce qui m'intrigue un peu c'est qu'en général perso si j'ai un bug sur safari j'ai le même sous chrome, et là sous chrome ton site est niquel, remarque tant mieux

Rah merci c'était ça ! Pourtant Overflow:hidden, ça n'avait pas l'air bien méchant :

a écrit :
Avec overflow: vous pouvez définir comment des éléments intérieurs, au contenu trop important, doivent être traités (...) hidden = L'élément sera coupé s'il dépasse les limites. (source self html)

Toujours selon self HTML,

a écrit :
Netscape 4.x n'interprète correctement que overflow:hidden. L'Explorer Internet jusqu'à la version 6 agrandit avec visible l'élément de telle sorte que son contenu soit entièrement visible. Opera jusqu'à la version 6 interprète auto comme visible et scroll comme hidden. Konqueror n'interprète toutes ces mentions correctement qu'à partir de la version 3.4.

Quel serait-donc le problème avec Safari ?

Pour revenir à mon premier problème, celui des rendus différents que donne les padding, j'ai l'impression que c'est une mauvaise technique de placer ses blocs grâce aux valeurs de padding ??

Ferdinand a écrit :
Toujours selon self HTML, (...)
Quel serait-donc le problème avec Safari ?

L'article cité est très vieux, la description donnée du comportement d'IE6 est difficilement compréhensible, et on se fiche comme d'une guigne de Netscape 4 ou 6 (!) et d'Opera 6 (non mais oh).
L'article en question ne t'apprendra rien d'utilise, donc. Tu peux l'oublier. (Et de mémoire je crois pas que Self HTML soit une super ressource pour l'intégration web, avec des propos précis et sûrs. Mais je dis peut-être une bêtise...)

Ferdinand a écrit :
j'ai l'impression que c'est une mauvaise technique de placer ses blocs grâce aux valeurs de padding ??

Le padding est plus un outil pour mettre en forme un bloc que pour le positionner. Pour le positionnement, c'est plutôt margin qui sera utile. Et puis un peu tout ça:
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
Bonne lecture.

#entete {
	padding: 0px 0;
	background:url(../styles/img/logo2.jpg) no-repeat 100% 0;
	height:73px;
} 
#entete h2 {
	margin: 0;
	padding: 41px 0;
	text-align:center;
	font: 26px "Times New Roman", Times, serif;
}

la div #entete a une hauteur de 73px alors qu'elle contient un titre home qui a une padding top et bottom 41px ce qui vaut 82px plus la taille prise par le texte.
la valeur 73px est respectée par ff et chrome alors que ie6 fait agrandir le bloc.
de meme pour la div #pied.

K-2 a écrit :
la valeur 73px est respectée par ff et chrome alors que ie6 fait agrandir le bloc

Pour info cette implémentation incorrecte de height dans IE6 a été corrigée dans IE7.