CSS et Firefox - HTML/CSS - Programmation
Marsh Posté le 22-02-2006 à 00:54:30
ya des différences dans le traitement du positionnement des div ent IE et NS. vérifie le CSS?
Marsh Posté le 22-02-2006 à 06:30:39
voila mon code : pour le moment j'ai mis mes styles dans la balise
Firefox/Netscape ne les prend pas du tout en compte.
<div style="position:relative;left:8px;width:124px;height:40px;">
<span style="vertical-align:middle;width:30px;">
<a class="liennav8" href="javascript:rubcentrale(10);">
<img src="/images/icones/cube-1.jpg" alt="Je gère mon compte !" border="0" vspace="0" hspace="0" align="middle">
</a>
</span>
<span style="width:94px;;vertical-align:middle;">
<a class="liennav8" href="javascript:rubcentrale(10);">
MON COMPTE
</a>
</span>
</div>
Marsh Posté le 05-03-2006 à 18:41:32
Je fais remonter ce topic car j'en chie moi aussi en ce moment pour faire comprendre à FireFox que l'attribut "width" en CSS devrait aussi marcher pour les <span> et les <label>.
Ca marche nickel avec IE mais FireFox n'en a rien à foutre. Là j'ai vraiment pas l'impression que c'est IE qui ne respecte pas un standard mais plutôt FireFox.
Exemple...
Dans le fichier HTML :
<label for="login">Identifiant</label><input class="saisie" type="text" id="login" name="login" /><br />
<label for="pass">Mot de passe</label><input class="saisie" type="text" id="pass" name="pass" />
Dans le CSS :
label { width:150px; text-align:left; }
input.saisie { width: 150px; }
Le but étant que peu importe la taille du texte dans le label, ça prenne 150 pixels de large à l'écran et que les login et pass soient donc bien alignés. Ben sous IE, ça marche. Sous FireFox, ça fait systématiquement la taille du texte en ignorant la taille du label (idem si j'avais mis un span) et donc rien n'est aligné, c'est laid.
Dire que je fais des efforts pour éviter les tables afin de bien séparer la mise en page et les données...
PS : la largeur de la zone de saisie est bonne par contre.
Marsh Posté le 05-03-2006 à 19:54:05
Bon, en rajoutant cette ligne dans la CSS de label (cf. exemple ci-dessus), ça marche mais être obligé de rajouter une bidouille propriétaire pour Mozilla, ça me donne envie de vomir.
display: -moz-inline-box;
Marsh Posté le 05-03-2006 à 20:37:06
xman a écrit : Je fais remonter ce topic car j'en chie moi aussi en ce moment pour faire comprendre à FireFox que l'attribut "width" en CSS devrait aussi marcher pour les <span> et les <label>. |
C'est pourtant Firefox qui a raison, on peut déclarer une largeur (et une hauteur) seulement sur les blocs. Pas les éléments en-ligne comme span ou label.
xman a écrit : Le but étant que peu importe la taille du texte dans le label, ça prenne 150 pixels de large |
Donc fait de ton label un bloc, par exemple en le mettant en flottant.
Marsh Posté le 05-03-2006 à 21:00:10
Si je le mets en flottant, je ne peux plus centrer l'ensemble label+input.
Marsh Posté le 05-03-2006 à 21:07:17
Mets les dans un conteneur et centre le conteneur...
Marsh Posté le 05-03-2006 à 21:08:37
Ben naïvement, j'ai toujours considéré <span> et <div> comme des conteneurs... Et je trouve logique qu'ils aient comme n'importe quoi d'autre une largeur et une hauteur.
Marsh Posté le 05-03-2006 à 21:12:27
Quand je dis conteneur c'est juste un terme générique. Un élément qui englobera tes label et tes input. Ca peut être un tableau, un DIV, un paragraphe, etc...
Maintenant, DIV et SPAN ne sont pas tout à fait identiques. Par défaut un DIV est un bloc, donc amené à contenir d'autres blocs ou du texte alors que SPAN est un élément en-ligne qui ne pourra que contenir du texte.
Tu pourras définir les dimensions d'un DIV, mais pas d'un SPAN.
Marsh Posté le 05-03-2006 à 23:56:46
Je viens de tester en mettant mon label dans un div en mode display:inline et auquel je donne une largeur de 150px.
Ca ne marche absolument pas, il ne prend que la largeur du label qu'il contient.
je continue donc à croire que la seule différence entre div et span, c'est l'attribut display.
Marsh Posté le 06-03-2006 à 00:17:53
xman a écrit : je continue donc à croire que la seule différence entre div et span, c'est l'attribut display. |
Et c'est exactement ce que je dis de puis le début. Un DIV est un bloc (donc display est par défaut à "block" ) et un SPAN est un élément en-ligne (donc display à "inline" )
Donc appliquer "display: inline" à DIV c'est en faire un SPAN et c'est logique que width ne fonctionne plus.
Maintenant, si tu veux faire ce genre de chose : http://djailles.free.fr/hfr/prog/login.html c'est tout à fait possible avec les flottants.
Marsh Posté le 06-03-2006 à 02:04:09
Ben avec des flottants, j'obtiens en effet un truc comme sur la page que tu cites : c'est à dire des labels collés à gauche du cadre et non pas groupés aux zones de texte et centrés avec celles-ci.
Bon, certes, je pourrais arriver à ce que ça soit moins collé à gauche en jouant sur les margin mais pfff, quelle galère, tout ça parce que le standard n'impose pas que chaque élément affiché soit une boîte (alors que ce serait si pratique).
Par exemple, les img sont des boîtes inline et c'est très bien.
Enfin bon, ça marche déjà comme j'ai fait alors je me repencherai sur la question quand j'aurai fini ce qui me reste à faire et d'ici-là le XHTML 8.1 Strict règlera peut-être enfin cette incongruité.
EDIT : remarque, je viens de penser à un truc qui me fait comprendre pourquoi c'est pas comme je voudrais : il serait impossible de faire revenir une partie d'une boîte à la ligne donc les span ne peuvent pas être gérés comme des boîtes. Mais un conteneur inline mais insécable, ça serait quand même une belle invention. Le seul truc que je connaisse qui le fasse, c'est <table><tr><td>...</td></tr></table>...
Marsh Posté le 06-03-2006 à 23:30:11
xman a écrit : Mais un conteneur inline mais insécable, ça serait quand même une belle invention. Le seul truc que je connaisse qui le fasse, c'est <table><tr><td>...</td></tr></table>... |
Ben ça existe en théorie c'est "display: inline-block" des CSS 2.1
Mais à ma connaissance il n'y a qu'Opera qui le gère correctement (le -moz-inline-box n'implémente qu'en partie inline-block et sert plus à la cuisine interne de Firefox pour la disposition des éléments XUL)
Marsh Posté le 22-02-2006 à 00:18:23
Je viens de transformer tous mes tableaux imbriqués par des DIV et du CSS
Mais je me rend compte avec stuperu que ce n'est pas compatible avec Firefiox et Netscape. alros que cela fonctionne avec IE
Y a til des restrictions pour les CSS avec Firefox et netscape ?
Merci