5568 sujets

Sémantique web et HTML

Problème balise 'input type="image" ' sous IE !

Bonjour à tous,

Je rencontre un problème sous IE qui n'apparait pas sous Firefox. Voici le problème :

<input type="image" name="commit" src="none" class="button" id="buttonOK" alt="Valider" />


Je souhaite que mon image soit gérée par un Css et non par un src voilà pourquoi je lui ai mit l'attribut "none". Apparament IE ne peut gérer une image que si on lui met une source directe alors que sous Firefox je ne rencontre pas le problème (il va bien tapper dans la class button de mon Css sans avoir besoin de source et l'image s'affiche donc corectement).

Comment est-il possible de forcer IE à aller tapper dans le Css en évitant l'attribut src de la balise input type="image" ???

Merci upload/8059-buttonok.JPG
Modifié par Marcos_59 (16 Aug 2006 - 16:30)
En css tu peux gérer l'arrière plan de ton image avec l'attribut background en précisant une adresse url, mais pas l'attribut src.
Le résultat sous IE est tout à fait normal, si tu veux afficher une image, tu dois en préciser la source.
Donc IE me force à utiliser l'atribut "src" alors que firefox non ?

Y a t-il une alternative ?


Pour info voici une partie du Css :


input.button {
	display: block;
	background-color: transparent;
	background-image: url(../images/img/Bouton/buttonBackground.gif);
	background-repeat: no-repeat;
	width: 134px;
	height: 30px;
	margin: 1px auto;
	padding: 5px 0 0 0;
	text-align: center;
	font-family: Comic sans MS;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
}

#buttonOK .icon {
	background-image: url(../images/img/Bouton/ok.gif);
}

Modifié par Marcos_59 (16 Aug 2006 - 16:30)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

Marcos_59 a écrit :
Donc IE me force à utiliser l'atribut "src" alors que firefox non ?


Non, ce n'est pas tout à fait cela.


C'est un peu compliqué, mais bon: cet attribut src n'est formellement pas obligatoire (#REQUIRED dans les DTD) pour l'élément input, mais ce n'est pas parce que son ommission est autorisée. C'est avant parce que la construction de la DTD n'autorise pas ce type de restriction: il faudrait pouvoir dire que src est #REQUIRED uniquement si l'attribut type a la valeur image.

Sur le fond, malgré cette absence formelle dans la DTD, un input type="image" doit avoir un attribut src, exactement comme un élément img (pour lequel la DTD n'a pas le même problème et déclare plus simplement src #REQUIRED).

Bref, omettre src ou lui donner une valeur fictive ("none" n'est pas une url valable) n'est pas possible.

Maintenant, si tu mets src="" dans IE, tu vois apparaître ton background-image, mais avec le signe indiquant que la source src n'a pu être trouvée.

Ce qui donne l'impression que "ça marche" dans FF, c'est qu'il ne signale pas les images qu'il n'a pas pu trouver, à la différence d'IE et d'autres navigateurs. Sinon, tu obtiendrais le même résultat que dans IE...

C'est d'ailleurs pour cela que FF, IE et tout les autres font apparaître le contenu de "alt": parce qu'ils rencontrent une erreur dans le code (image absente).

Bref, ce que tu peux faire éventuellement, c'est associer:
- une image transparente en src avec ton texte
- un background CSS
Laurent Denis a écrit :


Bah, dans ce cas, pas tant que cela. C'est à tester précidément : il y a bien une alternative textuelle fonctionnelle.


Rapidement testé: c'est faisable du point de vue accessibilité. Il faut simplement veiller à ce que la couleur du texte ne risque pas d'être identique à celle d'un arrière-plan dans une situation du type désactivation des css, des couleurs, etc. Comme pour n'importe quel texte en transparence sur un arrière-plan distinct.

(Un texte noir sera invisible chez une utilisateur ayant forcé tous les background en noir, par exemple... Mais le cas est limite)
Plus qu'une ommission de l'attribut src je pense qu'il s'agit encore ici d'une mauvaise séparation entre le fond et la forme. Formellement un bouton correspond à un lien <a> ou à un élément de formulaire <input> lesquels peuvent être personnalisés en utilisant des CSS.
Utiliser une image cliquable pour créer un bouton ne me semble pas être une pratique moderne du HTML.
Bis repetitat :

Laurent Denis a écrit :

Bref, ce que tu peux faire éventuellement, c'est associer:
- une image transparente en src avec ton texte
- un background CSS


Quoiqu'à la réflexion, ce n'était peut-être pas clair, en effet : il s'agit de mettre en src le texte mis en image avec fond transparent. Une image normale pour un bouton normal, donc. Qui laisse juste apparaître l'arrière-plan CSS...

Plus clair ? Smiley cligne
Laurent Denis a écrit :
Bis repetitat :



Quoiqu'à la réflexion, ce n'était peut-être pas clair, en effet : il s'agit de mettre en src le texte mis en image avec fond transparent. Une image normale pour un bouton normal, donc. Qui laisse juste apparaître l'arrière-plan CSS...

Plus clair ? Smiley cligne


Ok merci impec comme alernative mais j'avais compris à ton premier Post il était assez clair Smiley cligne
Sujet clos
Aller à