css different sous IE et Firefox

23 juil. 2007, 23:39

Bonjour,

je suis débutant en css et je suis en train de faire un design pour un site.
J'ai codé quelques div et le rendu est légerement differents sous ces deux navigateurs. Je voudrais que l'écart entre la colonne2 et le reste soit exactement de 4px. Sous IE, il semble bien qu'il y ai 4px mais sous firefox l'écart me semble nettement plus grand.
Deplus, je voudrais que la colonne 2 s'arrete exactement o meme niveau que le div footer.
Je ne comprends pas pourquoi ce n'est pas le cas.

Avez vous une explication et une solution pour y remédier?

Merci beaucoup

voila mon code:

Code : Tout sélectionner


<style type="text/css">
		div#conteneur
		{
			width: 737px ;
			height: 600px ;
			float:left;
			margin: 0 auto ;
			text-align: left ;
			background: #fff ;
			padding-left:15px;
			padding-right:20px;
			border:1px solid black;
			padding-top:5px;

		}
		
		h1#header
		{
			width: 258px ;
			margin: 0 ;
			text-indent:25px;
			border:1px solid black;
			//background: url(apple.jpg) no-repeat left top ;
		}
		
		div#contenu
		{
			margin-right:4px;
			margin-top:5px;
			width: 510px ;
			height: 390px ;
			padding-left: 2px ;
			padding-right: 2px ;
			padding-top: 5px ;
			padding-bottom: 3px ;
			border:1px solid black;
		}
		
		div#contenu h2
		{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.4em ;
			background: url(little_apple.gif) no-repeat left bottom ;
			color: #9b2 ;
			border-bottom: 1px solid #9b2 ;
		}
		div#contenu img
		{
			width: 500px ;
			height: 387px ;
			margin:1px;
			
		}
		#colonne2{
			padding: 1px ;
			margin-top:5px;
			width: 170px ;
			height: 522px ;
			float: right ;
			color: #8a0 ;
			border:1px solid black;
		

		}
		#listebouton{
			margin-top:0;
			margin-left:125px;
			border:1px solid black;
			width: 170px ;
			height:20px;
			margin-bottom:5px;
		}
		img#listebouton{
			padding-right:2px;
			width:10px;
			height:18px;
		}
		#footer
		{
			padding: 5px ;
			padding-bottom:1px;
			margin-right:5px;
			margin-top:5px;
			width: 510px ;
			height: 85px ;
			text-align: left ;
			color: #8a0 ;
			border:1px solid black;
		}
		
		</style>
		
		<div id="conteneur">
			<h1 id="header">Colored Design</h1><div id="colonne2"></div>
			<div id="contenu">
			<img src="image.png" title="nom" alt="fichier">
			</div>
			<div id="listebouton"><img src="image.png" title="nom" alt="fichier">
<img src="image.png" title="nom" alt="fichier">
<img src="image.png" title="nom" alt="fichier">
</div>
			<div id="footer">Elitr fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at velit aliquip denique cum.<br/> His ex altera definitionem</div>
			
		</div>

24 juil. 2007, 17:30

Pour que ton élément "colonne2" arrive au même élément que le pied, regarde les possibilités du positionnement flottant (avec la propriété float) ; mais, dans ce cas, il ne faudra pas oublier d'ajouter la propriété clear: both à "footer" pour qu'il soit bien en-dessous.

Puisque tu débutes en CSS, je te recommande de visiter le site Alsacréations et de t'inspirer des exemples de mise en page en CSS, qui t'éclaireront sur l'emploi du positionnement flottant.

Quant à l'écart, j'ai remarqué que tu as explicité une hauteur et une marge interne (padding) à ton élément "colonne2". N'oublie pas que, sous IE versions 5.5 et antérieures (ainsi que sous IE 6 et 7 sous certaines conditions), le modèle de boîte appliqué n'est pas celui du W3C : ce dernier exclut les marges internes (les paddings) et les bordures pour le calcul de la largeur et de la hauteur (width et height), alors que le modèle de Microsoft inclut marges internes et bordures. Essaie de supprimer le "padding" pour voir si la différence entre IE et Firefox disparaît.

Quelques lectures sur le modèle de boîte standard et sur les divergences avec celui de Microsoft (qu'il y ait ou non "doctype switching").

24 juil. 2007, 20:17

Merci beaucoup pour toutes ces informations.

J'ai rectifiés quelques trucs mais il me reste un souci.
En fait, dans mon contenu, j'affiche des images de deux types soit de taille 500*333 soit 250*350
mon probleme est que la div contenu

Code : Tout sélectionner

 div#contenu
      {
         margin-right:4px;
         margin-top:5px;
         width: 510px ;
         height: 360px ;
         border:1px solid black;
      }

s'allonge ou non en fonction de l'image affichée... J'ai rectifié cela en fixant height: 380px ;
En revanche, je souhaiterai que l'image soit centrée horizontalement et verticalement. Je galere a faire le verticalement car j'ai abandonnée avec la marges intérieur de conteneur...
Avez vous une idée?

merci

24 juil. 2007, 22:28

Je rectifie mon dernier post.
J'ai un souci j'ai un div de 360 de hauteur et des images de 333 ou 350 qui s'affichent dedans, ayant enlever toutes les marges interieures du div de 360, je ne comprends pas pourquoi, mon div grandi quand j'affiche une image 350...
Par contre, j'ai pris connaissance des marges négatives en Css pour faire des centrages mais ne connaissant pas a l'avance les dimsensions des images(soit 350 soit 333), je ne vais pas mettre ceci en place...

css different sous IE et Firefox

Qui est en ligne