Display : Overflow sous FF et Opera

bonsoir à tous,

En testant mon site sous Opera je suis tombé sur une différence de comportement comparé à FF.

Pour commencer, le CSS

<style type="text/css">
#bonus {
	float: right;
	width: 200px;
	height: 400px;
	background: #00CCCC;
}
#contenu {
	background: #00FF00;
	height: 500px;
	overflow: auto;
	margin-left: 10px;
}
</style>

Et le html

<div id="bonus"></div>
<div id="contenu"></div>

Le fait d'appliquer une marge à gauche provoque un décalage sous opéra.

Au lieu d'adapter le largeur du bloc "contenu", il prend l'espace disponible comme largeur et seulement après applique la marge ce qui provoque un décalage.

D'où viens cette différence? Que faut il modifier pour corriger ça?
Si possible j'aimerai éviter d'utiliser les padding mais si c'est l'unique solution, je vais donc revoir mon css.

Merci d'avance.

percherie a écrit :
Le fait d'appliquer une marge à gauche provoque un décalage sous opéra.

De quel "décalage" parles-tu? À priori, rien ne justifie ici une différence d'interprétation. Peux-tu nous fournir une capture d'écran du problème rencontré?

Voici la copie écran avec Opéra, le problème avec FF ne ce pose pas du tout

http://toutenkamion.net/opera.jpg

Le bloc en jaune est trop large et passe en dessous. En fait il semble prendre toute la largeur disponible et ensuite applique la marge, ce qui lui impose de passer en dessous.

Pour l'instant l'unique solution trouvée est de changer la marge en padding.

Bonjour,

Est-ce que tu n'aurais pas aussi une marge à droite sur div#contenu?

En tout cas, ça ressemble fortement à ceci:
http://web.covertprestige.info/test/31-marges-et-contexte-de-formatage.html
Modifié par Florent V. (10 Feb 2008 - 22:00)

Je te remercie, ça semble confirmer la piste où je suis partie. Il est préférable d'éviter de spécifier une marge aux éléments ayant un contexte de formatage, elle sont appliqué avec FF mais avec Safari ou Opera elle ne sont pas prioritaire par rapport aux marges des éléments entourant l'élément ayant un contexte de formatage.

Soit on applique les marges aux autres éléments ou sinon on doit utiliser un padding.

Merci pour le lien, c'était très instructif.