28220 sujets

CSS et mise en forme, CSS3

[Résolu] Background absent sur IE, ok sur Firefox !

Salut
J'ai un soucis d'apparence sur un background entre IE et Firefox qui n'apparaît pas sur IE.Quelqu'un pourrait-il m'indiquer la démarche SVP ?

Le code css :
.pun TH.tcl{height:28px;
background:url(../../img/Alice/coinhg.png)no-repeat ;
background-position:float:left;
padding-left:50px;
color:#5598d7;
font-weight:bold;
}

Et le résultat sous IE :
http://www.hiboox.com/vignettes/0207/3fcffee9.png
Et sous Firefox Smiley lol
http://www.hiboox.com/vignettes/0207/76b058a4.png

Voyez l'angle de "Forum" !!! l'image n'est pas prise en compte Smiley decu Smiley decu
Modifié par Express (08 Jan 2007 - 22:27)
Hum ... Aprés avoir lu ton bout de css, j'ai du mal a comprendre la ligne

"background-position:float:left;"

... ne serait-ce pas plutôt "background-position:left;" en me référant à Media-Box ?
Le code CSS que tu utilises a pas mal de caractères ou éléments collés les uns aux autres. Cela ne m'étonnerait pas que ça puisse poser problème à certains navigateurs (par exemple l'absence d'espace entre le sélecteur et l'accolade ouvrante fait buguer IE Mac, si je me souviens bien).

.pun TH.tcl {
	height: 28px;
	background: url(../../img/Alice/coinhg.png) left top no-repeat;
	padding-left: 50px;
	color: #5598d7;
	font-weight: bold;
}

Note : tous les espaces que j'ai rajoutés n'étaient pas forcément indispensables, il y en a qui servent juste à aérer visuellement.

Déjà, qu'est-ce que ça donne ?
mpop a écrit :
Le code CSS que tu utilises a pas mal de caractères ou éléments collés les uns aux autres. Cela ne m'étonnerait pas que ça puisse poser problème à certains navigateurs (par exemple l'absence d'espace entre le sélecteur et l'accolade ouvrante fait buguer IE Mac, si je me souviens bien).

.pun TH.tcl {
	height: 28px;
	background: url(../../img/Alice/coinhg.png) left top no-repeat;
	padding-left: 50px;
	color: #5598d7;
	font-weight: bold;
}

Note : tous les espaces que j'ai rajoutés n'étaient pas forcément indispensables, il y en a qui servent juste à aérer visuellement.

Déjà, qu'est-ce que ça donne ?



Nickel !!!!!!!!!! super merci,mais j'ai besoin d'une explication supplémentaire,car je ne connais pas cette contrainte,donc si tu pouvais m'expliquer,ou me donner un lien...
En tous cas ca fonctionne très bien merci Smiley cligne
Je ne sais pas exactement d'où pouvait venir le problème, mais sur les espaces (ou plutôt absence d'espaces) qui peuvent être problématiques, on avait ceci :
.pun TH.tcl{height:28px;

L'absence d'espace (théoriquement autorisée par la spécification CSS) entre le sélecteur et l'accolade ouvrante pose problème à certains navigateurs (IE Mac il me semble, mais je ne suis plus tout à fait sûr).

background:url(../../img/Alice/coinhg.png)no-repeat ;

L'absence d'espace entre la parenthèse fermante et le no-repeat me semble problématique : pas sûr que les navigateurs s'y retrouvent !

background-position:float:left;

Par ailleurs, on a déjà souligné le fait que ce machin affreux ne veut rien dire...
Au passage : pour le positionnement des images de fond, on indiquera dans l'ordre le positionnement horizontal puis le positionnement vertical. À ce titre, background-position: left top ou background-position: left sont tous les deux valides.

Dans la solution que j'ai proposée, j'ai rassemblée les propriétés background et background-position dans background.
Sujet clos
Aller à