28173 sujets

CSS et mise en forme, CSS3

Une mise en page très simple incompatible (je sèche)

Bonjour,

pour mon premier post (mais pas premiere lecture), je vous expose un de mes problème :

une mise en page simple comme on peut le voir ici :

http://kiwicasio.free.fr/test/

et évidement TRES différent sous IE ou FFox... je suis bien embeté.. je voulais rester simple Smiley ohwell

le code CSS associé :
body{
	background-color:	#c7b99b;
	color:				#c7b99b;
		
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 10pt;

	margin: 0;
}

#logo, #menu, #presentation{
 	margin: 10px;
	padding: 0;
	background-color: black;
	border: 1px solid red;
}


#menu, #presentation{
	height: 400px;
}

#menu{
	position: absolute;
	left: 0;
	width: 200px;
}

#presentation{
	margin-left: 230px;
}


/* Patch IE Transparence (pas NON conforme W3C) */
img.tr{
	behavior: url(interf/pngbehavior.htc);
}



c'est vraiment simple comme code, mais j'avou ne pas comprendre pourquoi il y a une telle incompatibilité entres les deux Smiley ohwell

et encore moins comment les résoudre...

ps : evidement je peu mettre margin à 0 puis inclure d'autre div dans le div, mais ce n'est quan même pas tres propre :s
Bonjour,
Tu as appliqué à tes 3 div des marges de 10 px, ces marges fusionnent
dans le cas de 2 élément adjacents c-a-d que l'espace entre tes div n'est pas de 20px (marhe top et bottom additionnées) mais de 10 px,
or etant donné que ton div#menu est en position abolue et donc sorti du flux, IE doit additionner sa marhge haute de 10 px à la marge bas du div logo comme il le fait sur sa marge droite.
Tu dois donc déclarer

#menu{
	position: absolute;
	left: 0;
	width: 200px;
 	margin-top: 10px !important; margin-top: 0;
}

Tu trouveras des explications sur le !important sur ce site.
IE applique le margin-top: 0 contrairement aux autre navigateurs qui appliquent margin-top: 10px car IE ne prends pas en compte le !important qui donne la priorité à la propriété qui le précède.
Et comme c'est la dernière régle qui compte IE applique le margin-top: 0

Voir http://openweb.eu.org/articles/cascade_css/ pour les explications sur les niveaux de prioriété d'application des styles.
La solution que je te donne n'est pas idéale : l'utilisation du !important dans la cas de 2 propriété identiques qui se suivent est un hack (bidouille) qui repose sur un default d'implémentation d'IE susceptible d'évoluer dans les prochaînes versions.
Une solution plus propre consiste à utiliser une css en commentaire conditionelle ciblant seulement IE. Voir la FAQ.

En règle général il vaut mieux que tu commences a rendre ton site compatible avec les navigateurs qui respectent les standards comme ceux basés sur le moteur de rendu Gecko (Mozilla, firefox..) et Opera,
et ensuite s'occuper de règler les problème d'affichage d'IE via uns CSS en commentaire conditionnelle.
Modifié par Hermann (10 Jun 2006 - 16:58)
Sujet clos
Aller à