28173 sujets

CSS et mise en forme, CSS3

[Résolu] Padding bizarre sous FireFox

Bonjour à tous,

je suis en train de monter un site avec des amis, que nous souhaitons passer en CSS (perso, je débute dans ce domaine). Le problème est que FireFox réagit différement qu'IE (l'éternel problème) sur une question de padding.

En effet, lorsque je spécifie un padding pour une des div, celle-ci s'élargit sous Firefox, tandis que IE se contente de décaler le texte.

Est-ce normal ? Y a-t-il un moyen de contourner problème ?

Voici le fichier CSS :


* {margin: 0; padding: 0;}

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 9pt;
   margin: 10px 0px 10px 0px;
   padding: 0;
   text-align: center;
}

img {
   border: none;
}

#divConteneur {
   margin: 0 auto;
   text-align: left;
   width: 800px;					
}

#divConteneur #divBandeau {
   height: 90px;
   margin-bottom: 20px;			
}
	
#divConteneur #divBandeau #divLogo {
   float: left;
   text-align: center;
   width: 250px;
}
		
#divConteneur #divBandeau #divLogo #slogan {
    font-style: italic;
   font-weight: bold;
}

#divConteneur #divBandeau #divRecherche {
   background-color: #AFCAE4;
   border: 1px solid #000000;
   float: right;			
   height: 100%;
   padding: 4px;                 /*le problème vient de là */
   text-align: left;
   width: 400px;
}


Et voici le fichier HTML:


<HTML>
	<HEAD>
		<TITLE>Algorisma</TITLE>
		<LINK href="./styles/main.css" rel="stylesheet" type="text/css">
	</HEAD>

	<BODY>
		<DIV id="divConteneur">
			<DIV id="divBandeau">
				<DIV id="divLogo">
					<A href="http://algorisma.ig2i.fr"><IMG src="./img/site/AlgorismaLogo.gif" alt="algorisma.ig2i.fr - Le site de partage de vos codes-sources"></A>
					<SPAN id="slogan">Partageons nos connaissances</SPAN>
				</DIV>
				
				<DIV id="divRecherche">
					Recherche
				</DIV>
			</DIV>
		</DIV>
	</BODY>
</HTML>


Merci d'avance,
MiniMarch
Modifié par minimarch (20 May 2006 - 17:52)
Bonjour minimarch,

Il faut savoir une chose déjà, si on utilise une DTD juste et adaptée, IE 6 devrait travailler en mode de conformité aux normes et appliquer le bon modèle de boîte.
Voir "Le DocType switching : forcer l'une ou l'autre interprétation des dimensions" dans l'excellent lien donné par gege.

IE 5 et 5.5 win traîneront toujours la patte : dans ce cas là, pour ne pas leur poser trop de problèmes, il y a deux solutions :


- La première consite à éviter de cumuler des informations qu'ils interprètent mal sur un même sélecteur. Il s'agit de ne pas placer de padding si on a spécifié la hauteur (height) ou la largeur (width) d'un élément.
Si on a vraiment besoin du padding, on essaye de l'appliquer sur un élément enfant. Exemple qui peut poser problème :
#texte{
     width: 500px;
     padding: 5px 10px;
     }
#texte p {
     color: black;
     }
Il faut préférer :
#texte{
     width: 500px;
     }
#texte p {
     padding: 5px 10px;
     color: black;
     }


- La seconde vise à corriger les choses en passant des valeurs incorrectes à IE pour lui faire afficher les boîtes avec les bonnes dimensions. On doit ceci à Tantek Çelik. (Box Model Hack); version française ici : Bidouillage de Boîtes.
Modifié par Smiley neko (20 May 2006 - 17:34)
Ah bah en fait, non.

Je viens de tester le CSS de différentes façons, et IE et FF prenne à chaque fois en compte la deuxième valeur du Width.

Et pourtant FF continue de prendre en compte le padding en plus. snif...
Merci beaucoup. c'est bon. Il suffit en effet de rajouter le DocType dans le fichier HTML, et ça marche beaucoup mieux !

Merci encore
@+
Sujet clos
Aller à