28220 sujets

CSS et mise en forme, CSS3

Boutons CSS avec fond et IE

Pages :
Bonjour à tous,

J'ai déjà fait des recherches sur le net et sur ce forum à propos du problème qui m'arrive dans le développement de mon nouveau site.
Aubaine pour vous expliquer, j'ai deux écrans de résolution différente, et je peux vous montrer le résultat sous Firefox en 1152*864 (à droite) et sous IE en 1024*768 (à gauche) :
upload/1253-Screenshot4.gif

Le problème est éloquent, les boutons créés par IE ont une marge à droite proportionnelle au texte du bouton (propriété value), ce qui foire mon layout !
Illustration de cette "marge", selectionner tout sous IE :
upload/1253-SDLCdev5.gif

Les images de fond font 20(+/-1)px de côté. Voici les codes :

Pour l'HTML :

<input type="submit" value="Enregistrer les modifications" class="btnvalid" /> 
<input type="button" value="Supprimer l'évènement" class="btnsuppr" onClick="supprEvent(##,##,##)" /> 
<input type="button" value="Retour" class="btnretour" onClick="history.go(-1);" />


Pour le CSS :
input, select, textarea {
	border: 1px #000000 solid;
	margin: 3px;
	padding: 1px;
	text-align:left;
	vertical-align:middle;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.btnvalid {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #990000;
	padding: 2px 2px 2px 20px;
	border: 0;
	background-color: #FFFFFF;
	margin: 5px;
	background-image: url(images/valid.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	font-weight: bold;
}
(et les deux autres 'btnsuppr' et 'btnretour' ont les mêmes propriétés, hormis le fond)

Quelqu'un peut m'indiquer comment résoudre ce problème ??

[ Édité par Stephan pour formater code ]
Modifié par Stephan (21 Mar 2005 - 01:17)
Bonjour BaalZebub et bienvenue sur le forum Alsacréations !

T'aurais pas un lien vers la page incriminée ? Smiley murf

Sinon, si ton sujet ne trouve pas preneur, n'hésite pas à le faire remonter en postant à nouveau.
Non mon site n'est pas online, mais il me semble que c'est assez parlant avec tout le code que j'ai donné.

Alors euh... UP !
Peut être qu'au lieu de poster tes 'UP' à tout va tu pourrais tenter d'apporter plus de précisions à ton problème, montrer que tu as fait des recherches de ton côté pour qu'on n'est pas l'impression que tu attende juste qu'on fasse le boulot à ta place.


Pourrais tu préciser :

"ce qui foire mon layout !"

Je vois bien une différence d'affichage sur certains 'input', mais en quoi ton "layout est foiré"?

Aussi, tu devrais vraiment essayer de mettre une version temporaire en ligne.
Modifié par jb_gfx (21 Mar 2005 - 13:35)
Ok ok excusez moi Smiley lol

Voici une version en ligne : http://sacresdjeunz.free.fr/temp.htm
(le design est très temporaire)

En fait, comme il me crée une marge supplémentaire sous IE, il m'affiche les boutons sur deux lignes au lieu d'une, et ce n'est pas ce que je veux.
Ce qui m'etonne surtout, c'est l'origine de ce bug, d'où il me sort cette marge ?

Merci par avance si vous pouvez m'eclairer. Smiley haha
Modifié par BaalZebub (21 Mar 2005 - 14:38)
Pourquoi tes <input> ne sont pas tous dans le même formulaire ?

Anyway, essaye de rajouter ça à ta CSS :

form {
   padding: 0;
   margin: 0;
}

Ça devrait te donner une piste...
Modifié par Stephan (21 Mar 2005 - 22:40)
Pour le form, je l'avais déjà fait, j'ai oublié de le preciser (j'ai rajouté le padding:0 par rapport à la version en ligne et j'ai le même résultat).

Pour les input, j'utilise en fait trois formulaires différents, qui ne réagissent pas s'ils sont les uns dans les autres; c'est pour cela que les input ne sont pas forcément dans le formulaire correspondant.

Une autre idée ? Smiley sweatdrop
Ne désespère pas !

Il y aura bien une âme charitable pour se pencher sur ton problème.
Pour le moment, moi je suis trop « busy ». Smiley biggol
Il semble que ça va être moi « l'âme charitable » Smiley cool

Pour résoudre ton problème dans IE/Win (IE/Mac n'a pas ce problème), j'ai concocté le monstre que voici :

/* \*/
* html input.btnvalid, * html input.btnretour {
	width: 15em;
}
/* */

Mais c'est très laid comme hack ! Smiley machia (Je n'entrerai pas dans les détails).

Sans vouloir te décourager, c'est toute la mise en pages de ton formulaire qui est à refaire. Smiley biggol

Tu utilises l'élément <dl> (definition list) pour formater un formulaire et quoique ce soit déjà tiré par les cheveux, tu imbriques en plus un grand tableau dans un élément <dd> (definition description). C'est horrible ! Smiley nut

Pour construire un formulaire accessible, il existe les éléments <fieldset>, <legend> et <label>. Smiley smile

En codant ton formulaire selon les règles de l'art, ton problème disparaîtra j'en suis presque certain. Smiley lol

Pour en savoir plus :
* Utilisation des formulaires
* Des formulaires plus simples
* The Man in Blue > Experiments > Form Layout (en)
* FORMidablement beau

Bonne lecture Smiley cligne
Je vais essayer de résoudre avec ce hack.
Concernant mon utilisation de <dd> etc... (piqué ici), ce n'était pas comme ça avant. D'ailleurs tu remarqueras que l'erreur se fait dans une liste <ul> et non sur les côtés où j'ai testé la méthode <dd> pour la mise en forme.

Merci en tous cas, je teste ça de suite !
Bon ba ça ne résoud pas mon problème puisque je n'ai pas de taille fixe d'input.
Je crois plutot que je vais faire des classes différentes pour les input du centre et des côtés...

Si quelqu'un a une autre idée... Smiley ohwell
Moi je te suggère plutôt de tout reprendre à zéro et de nous présenter un code propre et respectueux des standards parce qu'imbriquer des tableaux dans des <dd> pour avoir des coins arrondis, c'est pas la trouvaille du siècle. Un tableau dans un <li> n'est pas diable mieux non plus. Prends le temps de lire les liens que je t'ai proposés et fais un formulaire digne de ce nom. Sinon, t'auras beau faire remonter ton sujet cent fois, il ne trouvera pas preneur comme tu as pu le constater.

Au boulot !
Un truc que j'ai remarqué avec IE, lorsque qu'on applique un style à un input button, avec border, background, etc, c'est que plus le texte est long, plus le padding est long, même si on met padding 0
Pages :
Sujet clos
Aller à