Probleme background-image sur ie

Bonjour à tous

je mets une div avec une image en background.
cette image a pour hauteur 10px et une largeur de 1px
la div a pour hauteur 10px et je repete l'image en x.

Sous firefox et konqueror, pas de probleme
par contre sous ie l'image ne prend pas toute la div : je m'explique. L'image est bleu et j'ai mis un background jaune à la div. Et bien sous ie, je vois le background jaune.

Dans l'exemple ci dessous j'ai mis deux div l'une sous l'autre. Les 2 images devraient se toucher et on ne doit pas voir le jaune. Ce qui n'est pas le cas sous ie.

voici le code css :

#haut-centre-3d {
    margin-left:10px;
    margin-right:10px;
	margin-top:0;
	margin-bottom:0;
	background-color:yellow;
	padding:0;
    background-image : url("3d-haut.gif");
    background-repeat : repeat-x;
    height : 10px;
  }

et la page demo :ici

Salut,

ton lien page demo ne fonctionne pas.

Je ne dis pas que ça viens de là, mais ta syntaxe me parait bizarre.
Voilà comment je l'ecris:

body {  		
			background: url(./images/tonImage.jpg)  left top no-repeat;}

Modifié par Hum (30 May 2006 - 13:10)

Salut

Ajoute

#haut-centre-3d {
    line-height:0px;
    font-size:0px;
  }    

A+

ok merci : en rajoutant le font-size à 0px, je n'ai plus de probleme.
merci beaucoup.

Attention le lien n'est plus valide
merci encore

mathsenzep a écrit :
Bonjour à tous

Tiens ! Salut Coach

salut pgilbert : les ixprimnautes se retrouvent.

bon j'ai encore un probleme avec un flottant. je rajoute un bloc flottant à gauche et un à droite avec toujours une image en background. Et j'ai de nouveau une marge blanche sous ie. rrrr !

code css :

#haut-gauche-3d {
    background-image : url("3d-haut-gauche.gif");
    background-repeat : no-repeat;
    float : left;
    height : 10px;
    width : 10px;
	margin:0;
font-size:0px;
	line-height:0px;
  }


#haut-droit-3d {
    background-image : url("3d-haut-droit.gif");
    background-repeat : no-repeat;
    float : right;
    height : 10px;
    width : 10px;
	margin:0;
	font-size:0px;
	line-height:0px;
  }


#haut-centre-3d {
    margin-left:10px;
    margin-right:10px;
	margin-top:0;
	margin-bottom:0;
	padding:0;
    background-image : url("3d-haut.png");
    background-repeat : repeat-x;
    height : 10px;
	font-size:0px;
	line-height:0px;
  }

rappel du lien : là

Petit bug connu de IE

Essai de mettre tes deux span flottant dans ton div

A+

oui effectivement ça marche, c'est ce que j'avais fait au début.
Mais à ce moment là je n'ai plus la transparence sur la boite de gauche.
Alors pour résoudre cela faut que je vire le dégradé de mon body pour mettre une couleur : puis je modifie mon image de gauche en rajoutant cette couleur.

C'est un peu dommage.

Autre solution supprimer le height de ton bloc central et mettre a l’intérieur un élément qui va lui donner une hauteur de 10px

Pour Info http://www.test.blog-and-blues.org/haslayout/tests/float6.html

A+