28173 sujets

CSS et mise en forme, CSS3

[résolu] Background-color ? différent firefox/explorer ?

Bonjour

Je bloque sur le background-color d'une div interprété de maniére différente sur firefox et explorer :
Sur explorer le fond noir de la div apparait, sur firefox, pas de fond de div, c'est le fond du body en rouge qui apparait.

http://www.agnesdp-artbasque.net/essai/essai.html

Code css :
<style type="text/css">
body {
margin: 0px;
background: url(images/degrad.gif)repeat-x 50% top;
background-color:#850100;
height:100%;
}
/* centrer */
#centrer {
margin: auto;
background-color: black;
width: 900px;
margin: 3% auto;
}
#gauche {
float: left;
background-image: url(images/titreb.png);
width: 80px;
height:398px;
}
/* droite, corps */
#global {
float: right;
background-color: #eeecec;
border: 1px solid  #008000;
width: 90%;
}
</style>


code html :
<body>
<div id="centrer">
<div id="gauche">&nbsp;</div>
<div id="global">
........
.........
</div>
</div>
</body>



Merci pour le petit coup de main

Bonne journée
Modifié par africa (20 Jul 2007 - 11:09)
hum... à premiere vue je vois pas... mais quelques remarques :

- ton image "images/titreb.png" est un titre, et devrait donc je pense etre une balise <img> avec un alt="", éventuellement dans un <h1>, et non un attribut background-image

- tu utilises deux fois la propriété margin dans #centrer, c'est inutile.

- pour le souci du background, il est possible que ce soit le format .png le responsable. Essaye en .jpg pour voir. Sinon tu peux aussi ajouter un 

background-color: #000;


à ton élement gauche (mais le résultat n'est pas tout à fait pareil.)
Modifié par le.troll (20 Jul 2007 - 09:44)
Bonjour,

À vue de nez, ça n'est pas un problème de couleur de fond, mais un très classique problème de dépassement des flottants.

En gros ton bloc div#center a une hauteur nulle, car tout son contenu est flottant et donc «hors flux». Le comportement obtenu dans Internet Explorer (le bloc vient contenir les éléments flottants) est un bug.
Voir la FAQ pour plus de détails.

À priori, il suffirait de rajouter la ligne suivante à ta feuille de styles:
div#center {
	overflow: hidden;
}
Florent V. a écrit :
Bonjour,

À vue de nez, ça n'est pas un problème de couleur de fond, mais un très classique problème de dépassement des flottants.

En gros ton bloc div#center a une hauteur nulle, car tout son contenu est flottant et donc «hors flux». Le comportement obtenu dans Internet Explorer (le bloc vient contenir les éléments flottants) est un bug.
Voir la FAQ pour plus de détails.

À priori, il suffirait de rajouter la ligne suivante à ta feuille de styles:
div#center {
	overflow: hidden;
}


Merci Florent, c' est tout bon Smiley cligne

Je m'en vais faire un tour sur la faq.

Merci a toi Le.Troll pour ta réponse

Bonne journée à tous les deux.
Modifié par africa (20 Jul 2007 - 11:10)
Sujet clos
Aller à