5568 sujets

Sémantique web et HTML

[Résolu] Background sous IE et pas Firefox

Pages :
Bonjour,

Voici mon problème :

Dans un div "contenu", j'ai 2 div de largeur fixe et d'hauteur variable (ContenuA en jaune et contenuB en vert), je souhaite avoir une bordure à droite du div jaune et à gauche du div vert, cette bordure sépare donc les 2 div.
J'ai essayé avec le CSS, bordure à droite et bordure à gauche, mais l'effet visuel n'est pas top. J'ai donc imaginé de mettre une image/background dans le div "contenu" pour simuler un séparateur.
Résultat pas de problème sous IE mais pas de séparateur visible sous Firefox.
Quel est le problème ?

Pour voir :
Le HTML
Le CSS
Modifié le 01 Dec 2004 - 16:29
Les couleurs en background des #contenuA et #contenuB recouvrent ton image en background du #contenu.

<edit>
Ça ne marche pas, je viens de tester.
</edit>
Modifié le 01 Dec 2004 - 14:35
Effectivement si je mets une hauteur à mon div "contenu", cela fonctionne aussi sous Firefox...
mais le hic, c'est que je souhaite que mon div "contenu" ai une hauteur variable puisqu'il contient les 2 autres div (contenuA et contenuB) qui eux sont d'hauteurs variables...
Ok, je vois Stéphan... merci

mais j'ai reduit la largeur du ContenuA et du contenuB... et j'ai toujours le même problème...
mais peut-être n'ai-je pas compris ton post...
QuestionWeb a écrit :
Effectivement si je mets une hauteur à mon div "contenu", cela fonctionne aussi sous Firefox...
mais le hic, c'est que je souhaite que mon div "contenu" ai une hauteur variable puisqu'il contient les 2 autres div (contenuA et contenuB) qui eux sont d'hauteurs variables...

mets la même hauteur variable pour ta div "contenu" que pour la plus grande des 2 autes (en % par exemple...)
Poire...
J'ai testé ta suggestion, OK mon séparateur apparaît maintenant sous Firefox mais (il y a toujours un mais...) mon div contenuB descends d'autant...
Désolé Poire, mais je me suis trompé tout à l'heure sur ma conclusion... le hic, c'est je ne me souviens plus de ce que j'ai fait pour enfin voir mon séparateur toute à l'heure malgré le div "descendu".
en fait, si tu précise pas de taille pour ta div contenu et ke les div qu'elle contient son en float, ta div n'a pas de taille (height = 0), c'est pour ça que ton background s'affiche pas...
Poire a écrit :
en fait, si tu précise pas de taille pour ta div contenu et ke les div qu'elle contient son en float, ta div n'a pas de taille (height = 0), c'est pour ça que ton background s'affiche pas...


humm... Smiley hum C'est faux !
OK Poire, je m'en doutais un peu...

Euuhhh, Stephan , je suis en train de lire tes liens... lentement... je ne suis pas doué en anglais....
Stephan a écrit :


humm... Smiley hum C'est faux !

Beh c'est le résultat que je constate sous FireFox Smiley ohwell
Raphael a écrit :

[ quote=stephan]
"humm... hum C'est faux !"
[/quote ]

-> Euh non, c'est juste : les floats sortent du flux et n'agissent pas sur la taille de leur conteneur (sauf sur IE).
Donc effectivement, s'il n'a qu'un conteneur vide, sans height, ce ne sont pas les floats qui vont l'étirer.

Ou alors j'ai pas tout saisi


Donc Poire, tu as raison.

Alors il faut un clear: both; !
Modifié le 01 Dec 2004 - 15:44
Administrateur
En effet, IE interprête mal les flottants sur ce point : les flottants sortent du flux et donc n'agissent pas sur la hauteur de leur conteneur.

A tester sur IE et Firefox pour voir la différence flagrante :

<div>
	<p>test</p>
</div>

div {
background: yellow;
width: 500px;
}
p {
background: orange;
float: left;
width: 100px;
height: 200px;
}


Il faut donc un élément spacer avec clear both pour régler le problème.
Je me souviens avoir eu ce genre de problème avec les background.

De toute façon, la technique des bordures en background (faux-columns) est appliquée à la balise <body> normalement.
Modifié le 01 Dec 2004 - 15:52
Pages :
Sujet clos
Aller à