Image PNG

Bonjour,

voici un exemple de code CSS qui pose probléme. Il s'agit donc de pouvoir éviter que la partie du code agrandisse l'image tout en pouvant la répéter en background.

Voici l'exemple :

.fondbleu_centre
{
white-space: nowrap;
height: 25px;
color: #E0E0D4;
background-image: url('./../../../../jdr/images/fondbleu_centre.png');
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='./../../../../jdr/images/fondbleu_centre.png');
_background-image: none;
background-repeat: repeat-x;
padding: 3px 10px 0px 10px;
font-size: 1.1em;
vertical-align: middle;
}

La fonction qui m'intéresse est
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='./../../../../jdr/images/fondbleu_centre.png');

Avec cette méthode, il est possible de donner la transparence sous IE, le problème est qu'on a le choix entre juste 2 méthodes, le 'scale', ou 'crop', mais impossible alors de faire répéter l'image. De fait j'obtiens des décalages sous IE5 et IE6 comme ici sur mon site : www.malstorm.com on peut voir le décalage sur la barre de menu sous IE, que je n'ai pas réussi à atténuer entièrement.

Le problème peut être beaucoup plus flagrant, je l'ai atténué avant de lancer la béta du jeu histoire que çà soit le plus 'potable' possible. Comme ici j'ai besoin de m'en servir sur d'autres images, si jamais vous aviez une solution à ce problème, çà pourra beaucoup m'aider, pour moi c'est un vrai casse tête ...

Merci d'avance pour votre aide,

Nico

Salut et bienvenue parmi nous!

Moi, je procéderais autrement.

J'appliquerais les propriétés suivantes pour l'affichage de l'image PNG pour Firefox, Opera et IE7:

.fondbleu_centre {
  background: url(chemin-vers-ton-image.png);
}

Et pour les versions d'IE antérieures à la 7, la bidouille suivante:

* html .fondbleu_centre {
  background: url(chemin-vers-une-image.jpg-de-substitution);
}

Et le validateur des CSS du W3C ne te dira rien à ce sujet.

Hello,

Concernant la répétition de l'image, c'est malheureusement impossible avec la propriété filter, ce n'est donc pas possible d'afficher sous IE6 une image png alpha répétée en image de fond.

Ensuite pour filtrer les versions de navigateurs, les hacks "_propriete" ou "* html ..." sont tous les 2 à éviter, utiliser à la place les commentaires conditionnels.

Salut!

MrPatate a écrit :
Ensuite pour filtrer les versions de navigateurs, les hacks "_propriete" ou "* html ..." sont tous les 2 à éviter, utiliser à la place les commentaires conditionnels.

Si le hack "* html" est à éviter, pourquoi le validateur des CSS le laisse passer?

Victor BRITO a écrit :
Si le hack "* html" est à éviter, pourquoi le validateur des CSS le laisse passer?

Parce que les sélecteurs * et html sont parfaitement valides.

Ce sélecteur est donc valide au niveau de la syntaxe mais il ne correspond en toute logique à aucun élément, sauf pour IE. Le principe de ce hack est donc de profiter de ce bug.