[CSS] list-style et l'élément : marker-offset

Dev
1

Salut tout le monde

  • Est-ce que l’élément marker-offset est pris en compte par les navigateurs comme IE 6 et Mozilla version récente.

  • Je veux faire une liste mais c’est vraiment le bordel dans les options, et les résultats sont assez aléatoires. J’ai appris à d’abord me remettre en question avant de remettre en question les navigateurs…

Exemple :

     
  • 1er item...  
  • 2e item...

 

  • 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er item
  • 2e item 2e item 2e item 2e item 2e item 2e item 2e item 2e item 2e item 2e item
Si vous regardez çà sous les deux navigateurs le résultat sera assez différent (notamment au niveau des marges). 

Merci

je viens de tester, et là il n’y a pas de différences…  . En fait çà reformate le code et il n’y a plus mon style de puces…

Ce message a été édité par EzecKiel le 16/09/2003

2

Etrange, j’ai beau regarder de près, je ne vois pas de différence
marquante! La seule que je vois c’est la forme de la puce (un rond pour
IE et un losange pour Mozilla). Pour info, j’ai IE6 avec myIE2 et pour Mozilla c’est Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5b) Gecko/20030915

3

[quote]Salut tout le monde

  • Est-ce que l’élément marker-offset est pris en compte par les navigateurs comme IE 6 et Mozilla version récente.

Ie6 non, c’est sûr, il gère quasiment rien ce machin.

Mozilla, je crois, mais c’est pas sûr.

Je veux faire une liste mais c’est vraiment le bordel dans les options,
et les résultats sont assez aléatoires. J’ai appris à d’abord me
remettre en question avant de remettre en question les navigateurs…

Exemple :

[ul]  [li]1er item...[/li] 

[li]2e item…[/li][/ul]

 
[ul]
[li]1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er[/li]item 1er item 1er item 1er item 1er item 1er item 1er item 1er item 1er
item
[li]2e item 2e item 2e item 2e item 2e item 2e item 2e item 2e item 2e item 2e item[/li][/ul]
Si vous regardez çà sous les deux navigateurs le résultat sera assez différent (notamment au niveau des marges). 

Ca dépend en fait de la manière dont est géré l’indentation (ça n’est pas précisé dans la norme). Ie utilise le padding je crois, et mozilla le margin. Du coup, pour être certain du résultat final, faut spécifier les deux, à la fois pour ul et li[/quote]

4

La réponse à la question :

La page CSS1 and CSS2 browser support info regroupe des infos sur le support des propriétés CSS 1 et 2 de tout un tas de navigateurs :

[ul]
[li]Internet Explorer 4 for Windows[/li][li]Internet Explorer 5 for Windows[/li][li]Internet Explorer 5.5 for Windows[/li][li]Internet Explorer 6 for Windows[/li][li]Internet Explorer 4 for Macintosh[/li][li]Internet Explorer 5 for Macintosh[/li][li]Netscape Navigator 4 (all platforms)[/li][li]Netscape Navigator 6 (all platforms)[/li][li]Netscape Navigator 7 (all platforms)[/li][li]Opera 3.5 (all platforms)[/li][li]Opera 5 (all platforms)[/li][li]Opera 7 (all platforms)[/li][/ul]

Et la réponse ?

Dans la section “Generated Content”, on lit…

… que marker-offset n’est supporté que par Netscape 7

Reste à savoir quelles versions de Mozilla comprennent “marker-offset”, mais je n’ai pas (encore) trouvé d’infos à ce sujet.

Edit : pour les browser Mac, cf. MacEdition Guide to CSS2 Support in Mac-only Browsers : pas supporté non plus.

Ce message a été édité par Gabuzomeuh le 16/09/2003

5

[quote]Reste à savoir quelles versions de Mozilla comprennent “marker-offset”, mais je n’ai pas (encore) trouvé d’infos à ce sujet.

Ce message a été édité par Gabuzomeuh le 16/09/2003[/quote]
Si je ne me trompe pas, netscape 7 est basé sur mozilla 1.4. Donc…

6

[quote][quote]Reste à savoir quelles versions de Mozilla comprennent “marker-offset”, mais je n’ai pas (encore) trouvé d’infos à ce sujet.

Ce message a été édité par Gabuzomeuh le 16/09/2003[/quote]
Si je ne me trompe pas, netscape 7 est basé sur mozilla 1.4. Donc…[/quote] mozilla .09 en fait et netscape 7.1 sur la branche 1.4

7

Autre question pourquoi j’ai une différence de hauteur de 1px entre Mozilla et IE quand j’utilise une

par exemple

Franchement c’est trop saoulant c’est différence à la con entre les 2 browsers… Pas foutu de se conformer aux standards !!!

8

[quote]Autre question pourquoi j’ai une différence de hauteur de 1px entre Mozilla et IE quand j’utilise une par exemple

Franchement c’est trop saoulant c’est différence à la con entre les 2
browsers… Pas foutu de se conformer aux standards !!! [/quote]Parce qu’ie est daubique : quand, pour écrire du texte (ou mettre un image, enfin, n’importe quoi), il s’aperçoit que le bloc contenant n’est pas assez large (ou haut), il l’agrandit. Ce qui est parfaitement absurde. Si je mets : width:100px, je veux 100px, je veux pas 101px, même si le contenu dépasse (s’il dépasse et que je le veux pas, je changerais ma valeur, mais sinon, je fais comment ? je me doigte ?)

Le truc, là, c’est que, MEME DANS UN BLOC SANS AUCUN TEXTE, il fais comme s’il y avait un caractère espace. La hauteur d’une ligne de texte devant être supérieure à 10 px, bah il agrandit…

Solution : font-size:0px (là on est sûr que ça sera assez grand, 10px de hauteur…) ou bien overflow:hidden. Mais, si tu as des trucs qui dépassent, forcément, ça sera masqué…

9

En parlant d’IE qui n’est pas gentil parce qu’il n’est pas conforme  100 % aux standards CSS par exemple…tout comme Mozilla, je me suis aperçu que les développeurs de Mozilla font eux aussi quelques éléments juste pour Mozilla…

Je ne trouve pas çà très “bien” car ce navigateur a pour objectif (et comme philosophie ??) de NORMALISER le html et le css. Donc pourquoi rajouter leur propres styles, comme IE ???

Pour info j’ai trouver çà dans la feuille de style de texturizer.net : http://texturizer.net/firebird/style.css

/* -moz-border-radius: 3px; /* mozilla only */[/quote]
10

Il faut savoir qu’avec Mozilla les menus, la barre des menus, les
panneaux de configuration, les thèmes et tout les éléments du programme
sont
affichés par le moteur de rendu HTML lui-même (Gecko). Certain styles (ceux qui
commence par -moz-) ont donc été
créés pour ces besoins là. Ces styles sont en fait des fonctions de XUL (XML
User Interface Language 1.0), l’interface utilisateur de Mozilla.
Bien évidemment, comme les nouvelles
fonctions sont utilisables par le moteur Gecko, elles le sont partout
et aussi dans le cas de l’affichage d’une page web… On peut donc
utiliser ces fonctions dans une page web quelconque même si ce ne sont
pas leurs utilité première.
Je
tiens a faire remarquer que ces fonctions sont assez explicites vu
qu’elles commencent toutes par -moz-. Le développeur est donc
directement mis au courant que son style ne sera pas “compris” par
d’autres navigateurs que ceux basé sur Gecko.
Il serait bien dommage
d’inverser la situation actuelle en utilisant de telles fonctions dans
nos pages internet n’est-ce pas?
C’est pas bien texturizer.net, pas bien du tout!

Ce message a été édité par Lemm le 18/09/2003

11

Merci pour la précision, je ne savais pas du tout…

12

[quote]Parce qu’ie est daubique : quand, pour écrire du texte (ou mettre un image, enfin, n’importe quoi), il s’aperçoit que le bloc contenant n’est pas assez large (ou haut), il l’agrandit. Ce qui est parfaitement absurde. Si je mets : width:100px, je veux 100px, je veux pas 101px, même si le contenu dépasse (s’il dépasse et que je le veux pas, je changerais ma valeur, mais sinon, je fais comment ? je me doigte ?)[/quote]Alors la je dis : N’importe quoi. C’est justement ce contre quoi je rale a chaque fois avec Moz. L’attribut CSS overflow permet de faire exactement ce que tu veux si tu veux specifier une taille et qui rien ne depasse meme si le contenu est plus grand. Donc accuser IE de daubisme sur ce pretexte est completement ridicule, c’est prevu et c’est fait pour. En revanche sous moz, au contraire de IE, il y a AUCUN moyen de specifier facilement une taille minimale pour un element genre div. Tu veux un truc qui fasse 100x100 qui se retaille en fonction si c’est plus grand mais qui, si c’est plus petit il fasse toujours 100x100? Ben avec IE c’est le comportement par defaut. Faire un div qui tronque ce que tu veux a toujours ete facile et les deux browser respectent parfaitement ce que tu leur dit, faire un div avec une taille minimale qui se retaille c’est TROP Chiant. Et c’est bien plus souvent utilise qu’une taille de div fixe.

13

Yep, voilà. Faut noter plusieurs choses :[ul]
[li]En faisant ça, mozilla respecte tjs les normes (sauf erreur, c’est vague dans mes souvenirs) car la spec css indique qu’un soft peut rajouter ses propres styles tant qu’il rajoute un identifiant qui lui est propre au début du style. Ce qui est donc fait ici grâce au moz-[/li][li]ça sert donc à la mise en forme de l’interface aussi. Les boutons de formulaires, je crois, sont aussi stylés grâce à des trucs propriétaires (mais c’est juste pour obtenir le display d’un bouton classique quoi)[/li][li]Certains éléments actuellement en moz-* vont basculer en * (ie le moz- va virer) car elles font parties des specs css3. Je crois que c’est le cas par exemple de border-radius. C’est donc juste un support avant-l’heure du css3[/li][/ul]

14

Et comment je vais si je veux que le div conteneur reste à la taille définie par toi, mais que le contenu qui déborde soit affiché quand même? Si tu mets overflow:visible,le div va s’agrandir, pour hidden, tu verras rien,pour scroll et auto ça fait pas ce qu’on veut. Donc il y a aussi des cas impossible à gérer avec ie. Donc, d’une part, le fait que le div s’aggrandisse soit bien ou mal est très discutable (perso je préfère pas), d’autre part, le problème n’est pas là : il y a un standard, il faut le respecter. Il est globalement bon, alors même dans le cas où il y a un détail qui te plains pas, faut le respecter quand même, sinon après on est obligé de se taper des problèmes de compatibilité.

15
Roger. Mais pour moi quelque chose de standard, c'est quelque chose qui est interprété de la même façon sur plusieurs navigateur. Donc le moz- n'est pas standard même si les spefs le permettent.

En revanche, je cherche un style du genre capable d’être interprété sous Mozilla…

filter: progid[img]style_emoticons/<#EMO_DIR#>/biggrin.gif[/img]XImageTransform.Microsoft.gradient
C'est prévu dans les CSS 3 çà ???

Sinon pour l’info je viens de m’apercevoir qu’IE ne supporte que partiellement les descendances au niveau des sélecteurs.

ex :

 

Hey I'm trying to be the best and I can be pour mon audience française

  De temps en temps une petite citation de JCVD çà ne fait pas de mal même s’il faut en consommer avec modération.
 

dans ma CSS j'ai
div.bestcitation {   position:absolute;   top:0px }

/* LA, INTERNET EXPLORER SUPPORTE ET INTERPRETE CORRECTEMENT */

div.bestcitation h1
{
  background-color:#F05458;
  text-align: center
}

/* UNIQUEMENT SUPPORTE PAR MOZ…

div.bestcitation p
{
  padding : 5px
}

 

16
  1. A ma connaissance le standard ne precise pas. Et si il le fait (m’etonnerais) le standard se trompe et c’est de la merde a cause de (2)
  2. Non seulement le cas d’un div avec le contenu qui deborde hors du div n’a aucune justification logique. Tu as un conteneur dont le contenu depasse la taille du contenu? C’est quoi l’interet d’avoir un conteneur alors? Et pour avoir fait plein de sites pro avec des divs je peux te garantir que ca n’a, au mieux, qu’une utilisation TRES marginale. Alors que le cas du div de la taille mini est TRES courant.

C’est pas un combat IE/Moz. La reaction qui consiste a dire “ouai mais toi d’abord aussi nananere tu peux meme pas faire ca“ est DEBILE. Faut voir ce les besoins des utilisateurs et des pros qui font des sites. Sans discuter de la qualite du logiciel sur ce point precis Moz se gourre et c’est juste que le scenario le plus courant est pas faisable facilement avec moz.

Ezeckiel: pourquoi tu precise div.bestcitation ? Parceque vu ce que tu veux faire la dans ce cas precis ce que tu veux c’est pas une classe c’est un ID. Pour placer les trucs precisement tu veux pas d’un truc generique comme une classe, tu veux placer UN element donne, a UN endroit precis. Donc essaye avec #bestcitation h1 et #bestcitations P et remplace ton class= par un id=. Voir si ca marche…

Ce message a été édité par GloP le 18/09/2003

17
div.bestcitation {

  position:absolute;

  top:0px;

}

div.bestcitation h1 {

  background-color:#F05458;

  text-align:center;

}

div.bestcitation p {padding:5px;}[/quote]Ton css devrait plus ressembler à ça.
Et là ça marche sous Internet Explorer et sous Mozilla.

Edit : GloP a raison pour le id="".

(oui, je suis un intégriste)
Ce message a été édité par Moe le 18/09/2003

18

[quote]1)
A ma connaissance le standard ne precise pas. Et si il le fait
(m’etonnerais) le standard se trompe et c’est de la merde a cause de (2)
2)
Non seulement le cas d’un div avec le contenu qui deborde hors du div
n’a aucune justification logique. Tu as un conteneur dont le contenu
depasse la taille du contenu? C’est quoi l’interet d’avoir un conteneur
alors? Et pour avoir fait plein de sites pro avec des divs je
peux te garantir que ca n’a, au mieux, qu’une utilisation TRES
marginale. Alors que le cas du div de la taille mini est TRES courant.

C’est
pas un combat IE/Moz. La reaction qui consiste a dire “ouai mais toi
d’abord aussi nananere tu peux meme pas faire ca“ est DEBILE. Faut voir
ce les besoins des utilisateurs et des pros qui font des sites.
Sans discuter de la qualite du logiciel sur ce point precis Moz se
gourre et c’est juste que le scenario le plus courant est pas faisable
facilement avec moz.

Ezeckiel: pourquoi tu precise
div.bestcitation ? Parceque vu ce que tu veux faire la dans ce cas
precis ce que tu veux c’est pas une classe c’est un ID. Pour placer les
trucs precisement tu veux pas d’un truc generique comme une classe, tu
veux placer UN element donne, a UN endroit precis. Donc essaye avec
#bestcitation h1 et #bestcitations P et remplace ton class= par un id=.
Voir si ca marche…

Ce message a été édité par GloP le 18/09/2003[/quote]
Il le précise, peut-être pas de manière très claire, mais il le précise : avec les algos pour déterminer la largeur d’un bloc en fonction des valeurs de margin, padding, witdh et autres. A aucun moment la largeur du contenu du div n’est prise en compte.

Sinon, à quoi sert à conteneur dont le contenu dépasse ? Bah, pas à grand chose, dans une bonne partie des cas, en effet. Mais je m’arrange pour que ça ne dépasse pas, tout simplement.

En effet, ça n’est pas un combat moz/ie (puisque tt les navigateurs sauf ie, à ma connaissance, fonctionnent sur le même principe que moz), c’est plutôt un combat norme bien/mal foutue sur ce point.

Pour moi, la norme est bien foutue (sur ce point-l&#224, maintenant, je te concède volontiers que cela pose dans quelques cas des problèmes. Il faudrait, à mon avis, rajouter une option à overflow pour indiquer que le conteneur doit être agrandis dans ce cas-là : tt le monde serait content

Ezeckiel :

Non, un standard c’est pas pour que tout soit exactement pareil partout, c’est pour que tout le monde comprenne ce que les autres disent, l’interopérabilité quoi. Alors, oui, dans beaucoup de cas, ça implique un résultat identique, mais ça peut aussi résulter, dans ce cas par exemple, à une ignorance de valeur propre (non, oubliés les maths là . C’est-à-dire que la norme permet à des browsers de rajouter des options soit pour leur fonctionnement interne, soit pour des trucs en cours d’implémentation, soit des trucs qui permettront, par exemple, de montrer les avantages d’un attribut en cours de proposition au w3c. Les autres browsers, grâce au standard, peuvent ignorer proprement ces trucs.

Pour le problème des sélecteurs, j’ai jamais eu de problème avec ie sur ce genre de sélecteurs. Il gère pas > ni +, mais sur ’ ', il ne m’a jamais posé de problème, vérifier ton fichier css

19

[quote]Pour le problème des sélecteurs, j’ai jamais eu de problème avec ie sur ce genre de sélecteurs. Il gère pas > ni +, mais sur ’ ', il ne m’a jamais posé de problème, vérifier ton fichier css[/quote]  Je ne pense pas car dans Firebird çà marche très bien…

Sinon, c’est clair qu’il n’y pas de combat IE/Mozilla, mais il devrait y avoir un combat “1 pour tous, tous pour 1”. De toutes façons on ne va refaire le monde…

Et en plus côté standardisation, les navigateurs ont fait bcp de progrès par rapport à ce qu’on a connus donc il ne faut pas se plaindre mais les CSS c’est tellement pratique que si çà pouvait être 100% identique sur toutes les plateformes (et là y’en a qui vont me dire ouaih et pour ceux qu’on un browser text il font comment ?).

Sinon, je ne comprend pas trop pourquoi Microsoft ne patche pas trop I.E. pour ce genre de détails (car il faut bien l’avouer, un pixel qui est décalé ne change pas la face du monde, même si çà fait l’effet d’un grain de sable dans une chaussure).
Je pense que çà ne doit pas prendre énormément de ressources (humaines).

Et puisque c’est un outil gratuit, pourquoi ne pas ouvrir son code source ? (à cause des failles de sécurité sans doutes ?

20

D’ailleurs quelle est la différence CLASSE, ID ?? juste une question de fréquences d’utilisations ? Quand on met CLASS c’est qu’on a l’intention de s’en resservir plusieurs fois et quand on utilise ID c’est qu’on l’utilise ponctuellement ?