28172 sujets

CSS et mise en forme, CSS3

Probleme de padding sur FF et pas IE

Bonjour, voilà je développe un site web via CSS...

Voici mon css,images et page : http://www.zshare.net/download/9673630da2e973/

Aller, regarder le d'abord sous IE, puis sous FF ... le div photo_page en bas sous FF se colle au reste de la page et n'affiche pas l'encadré rouge...

Sous IE, le fait qu'il se décalle comme je le voudrais est du au padding:30px de la page...
Mais alors, comment faire pour qu'il s'affiche aussi sous FF...
J'ai essayé d'ajouter un margin-bottom mais sans résultat...

Merci de votre aide ! Smiley cligne
Bonjour,

À vue de nez un problème dans la gestion du clear par IE6.

La propriété clear force un élément à se placer en dessous des flottants (en float:left ou float:right ou les deux, suivant la valeur utilisée pour clear) qui le précèdent dans le code HTML. (L'action de clear peut éventuellement être limitée par la présence d'un conteneur créant un contexte de formatage, mais c'est une autre histoire.)

Par contre, les marges de l'élément «clearé» continuent à ne pas prendre en compte les flottants, comme c'est normalement le cas. Donc la marge passe «sous» le flottant et comme celui-ci a une hauteur de 394px et que le margin-top utilisé est de 400px, ça nous donne un écart de 6px entre l'image flottante et le bloc «clearé». Sauf dans IE qui semble prendre les choses autrement.

Solution:
1. supprimer le margin-top sur le bloc «clearé»;
2. utiliser un padding-top: 6px à la place, ou éventuellement un margin-bottom: 6px sur chacun des deux flottants.

Par ailleurs:
1. Je n'ai pas vu de problème de padding sur ta page en ligne (?).
2. Tu as une erreur dans la manière dont tu écris ton CSS pour la bordure:
#photo_page{
	border-style: solid;
	[#red]border: #8E0000;[/#]
	border-width: thin;
}
La deuxième ligne écrase la première. Il faut écrire: 
#photo_page{
	border-style: solid;
	[#blue]border-color: #8E0000;[/#]
	border-width: thin;
}
ou encore 
#photo_page{
	[#blue]border: thin solid #8E0000;[/#]
}
kisscool a écrit :
Est-il possible d'agrandir le margin-bottom plus que 6px?

Ben oui, c'est toi qui choisis l'écart voulu.
Et donc pour le probleme sur IE ? car l'écart est plus grand... c'est surement à cause du padding de la page...
kisscool a écrit :
Et donc pour le probleme sur IE ?

Aucune idée. La marge a l'air d'être doublée, mais je ne m'explique pas trop pourquoi. Ce n'est en tout cas pas le bon vieux Doubled Margin Bug.

kisscool a écrit :
c'est surement à cause du padding de la page...

J'en doute... ça change quelque chose si tu supprimes momentanément ce padding?

À tout hasard, tu peux tenter de remplacer le margin-bottom sur le flottant par un padding-bottom.

En passant, l'image dit «Bievenue» au lieu de «Bienvenue».
Modérateur
bonsoir,

c'est un defaut de layout qui applique a priori , 2 fois cette marge.(la surface d'affichage et sa position est indéterminé dans IE)

un : height:1%; pour IE et un overflow:hidden; pour les autres devrait réglé ce defaut et englobé les flottants (voir bordure).
(pour : #photo_page)

GC
Modifié par gcyrillus (30 Mar 2008 - 23:27)
Sujet clos
Aller à