28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je passe par ici, aprés m'être abrevé des tutos, pour un petit soucis compatibilité entre -firefox/internet explore 7- et -internet explorer 6-
pour exemple, un apercu d'un rendu de mise en page sous FF comme souhaité mais avec certains décallages sous IE6
démo

Auriez vous des astuces ou conseils pour corriger par exemple le decallage entre le header et le menu (espace blanc) sans altérer l'affichage ds FF ?

Par avance merci de vos conseils
Salut,

A vu de nez c'est un problème de header, tu bloques le height de ton header mais l'image du logo à un padding bottom de 80px, pour ie7 et ff pas de problème, ils respecte la hauteur fixe du header mais ie6, y sait pas faire alors le header prend la hauteur totale du contenu soit 185+80px... Smiley cligne
Merci ghost,

Effectivement, y'a un doublon entre l'espacement logo et header.
j'ai supprimé donc le padding pour el logo et réduit à 80 la hauteur du header:
#header {
	height: 80px;
}
#logo {
	padding: 0px 0px 0px 0px;
}

j'ai désormais un affichage "correct" dans IE6, ms plus de menu sous FF.
je continue de bidouiller pour trouver le meilleur compromis.
Bonjour,

Question: pourquoi donnes-tu une hauteur au header, au fait?
Ça me semble inutile.

Si tu tiens à donner une hauteur, il faut qu'elle soit au moins égale à celle de son contenu, sauf si tu veux que ce contenu déborde et vienne recouvrir d'autres éléments (comme ici le menu), ou bien si tu veux le tronquer via un overflow: hidden.

Pour rappel, le contenu de ton header est un lien qui contient une image de 184px de haut. La hauteur totale de ce contenu sera donc probablement de 187 ou 188px de haut (l'espace sous l'image dépendant de la taille du texte).