[CSS] Border & FireFox

[Rom1]

Bonjour,

J'ai un problème pour assigner une bordure à un div et je crois que ça vient du fait que j'ai plusieurs div imbriqués.

Tout d'abord voici ma structure HTML (très simple):

<div id="container">
	<div id="header_left"></div>

	<div id="header_right"></div>

	<div id="header"></div>

	<div id="thematics"></div>

	<div id="content_left">
		<div id="searchbox"></div>
		<div id="menu"></div>
		<div id="content_left_ad"></div>
	</div>

	<div id="content_right">
		<div id="article"></div>
		<div id="content_right_ad"></div>
	</div>	

</div>

Ensuite voici la partie du code CSS qui nous intéresse:

#container {
	margin: 0 auto;
	width: 728px;
	border-color:#000033;
	border-width:1px;
	border-style:solid;
}

Comme vous pouvez le voir, je souhaite assigner à DIV#container une bordure de 1px (un cadre)

Le problème est que, sous FireFox, le cadre s'arrête après DIV#thematics alors qu'il englobe bien tous les DIVs sous IE.

Peut être avez-vous déja rencontré ce problème et pouvez-vous m'aider?

Merci d'avance!

Modifié 6 Mars 2007 par Rom1

[wonderclochette]

Salut,

Les éléments qui suivent DIV#thematics dans le flux sont sans doute en float. Il faut donc que tu créé un contexte de formatage pour l'élément conteneur.

Le résultat avec IE est un bug de haslayout, comme tu pourras le voir en testant avec #container sans bordure ni largeur. Mais c'est un bug qui tombe bien puisque IE refuse de créer des contextes de formatage.

Lecture : http://www.blog-and-blues.org/articles/Flo...es_de_formatage

Bon courage

Modifié 6 Mars 2007 par wonderclochette

[karnabal]

Salut,

Un exemple en ligne nous permettrait de mieux t'aider. Il est important que nous puissions disposer de tous les styles.

[Rom1]

Désolé j'ai posté ce message avant d'aller me coucher, je crois que j'étais trop crevé... C'est vrai qu'en relisant je ne pourrais même pas m'aider

Mais wonderclochette a fait cette prouesse et m'a pointé vers la bonne direction!

Merci pour le lien vers cet article!

Pour ceux que ça intéresse, j'ai ajouté la propriété overflow:auto à mon DIV#container et ça a réglé le problème!

Voici les propriétés que vous pouvez utiliser (tiré de l'article çi-dessus):

* float:left et float:right (qui ne sont pas forcément adaptés aux contraintes de la structure concernée)

* position:absolute et position:fixed (qui ont de fortes chances de l'être encore moins)

* overflow:auto, overflow:hidden (et pour mémoire overflow:scroll), qui permettent également d'étendre le calcul de hauteur du conteneur à ses enfants flottants, ce qui peut s'avérer particulièrement intéressant pour faire d'une pierre deux coups dans certains cas de mise en plage plus complexes.

* display:table-cell qui modifiera le mode de calcul de la largeur du conteneur (il s'adaptera à son contenu) mais qui offre par ailleurs des possibilités de centrage vertical très aisé.

* display:inline-block pour lequel nous allons hélas butter sur de sérieux problèmes d'implémentation.

Modifié 6 Mars 2007 par Rom1