Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

methode pour gere css et navigateurs

75 réponses
Avatar
J-F Portala
Bonjour,
j'ai quelques difficultés à obtenir le même rendu sur les navigateurs IE et
firefox.
J'utilise des CSS. (enfin j'essaie)
J'affiche un tableau dans lesquels les lignes paires et impaires ont un fond
blanc ou vert.
Avec firefox, cela se passe bien, avec IE, j'ai un fond completement gris.

Je ne vous demande pas de débugger mon probleme, mais juste de m'indiquer
quelle est la méthode à utiliser ou éventuellement les outils
pour rechercher ce type de probleme.

Merci

Jeff

10 réponses

1 2 3 4 5
Avatar
SAM
Le 12/1/08 8:22 PM, J-F Portala a écrit :
Bonjour,
j'ai quelques difficultés à obtenir le même rendu sur les navigateurs IE et
firefox.
J'utilise des CSS. (enfin j'essaie)
J'affiche un tableau dans lesquels les lignes paires et impaires ont un fond
blanc ou vert.
Avec firefox, cela se passe bien, avec IE, j'ai un fond completement gris.

Je ne vous demande pas de débugger mon probleme, mais juste de m'indiquer
quelle est la méthode à utiliser ou éventuellement les outils
pour rechercher ce type de probleme.



tr td { background: #ffc; }
tr.gr td { background: lime; }

<table border=1 width="80%">
<tr><td>1</td><td>2</td></tr>
<tr class="gr"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr class="gr"><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
<tr class="gr"><td>9</td><td>0</td></tr>
</table>

<http://stephane.moriaux.pagesperso-orange.fr/truc/tables_highlight_cells&gt;
<http://stephane.moriaux.pagesperso-orange.fr/truc/tables_highlight_rows&gt;
<http://stephane.moriaux.pagesperso-orange.fr/truc/tables_un-sur-deux_rows_fr&gt;

--
sm
Avatar
Olivier Miakinen
Le 01/12/2008 20:22, J-F Portala a écrit :

j'ai quelques difficultés à obtenir le même rendu sur les navigateurs IE et
firefox.
J'utilise des CSS. (enfin j'essaie)
J'affiche un tableau dans lesquels les lignes paires et impaires ont un fond
blanc ou vert.
Avec firefox, cela se passe bien, avec IE, j'ai un fond completement gris.

Je ne vous demande pas de débugger mon probleme, mais juste de m'indiquer
quelle est la méthode à utiliser ou éventuellement les outils
pour rechercher ce type de probleme.



Difficile de te répondre comme ça, parce qu'une grande partie des bugs
d'Internet Explorer consiste juste en des trucs non implémentés. Il y a
peut-être des sites qui les recensent, mais sinon la lecture régulière
de ce groupe permet d'en connaître pas mal.

Par exemple, si tu a utilisé le sélecteur « + », alors ça ne peut pas
fonctionner dans IE6 (avec IE7 je pense que c'est bon mais je n'ai pas
vérifié).

Et si tu as utilisé la pseudo-classe CSS3 « :nth-child », alors il n'y a
sans doute pas encore beaucoup de navigateurs où cela marche.
Avatar
Sergio
SAM a présenté l'énoncé suivant :

J'affiche un tableau dans lesquels les lignes paires et impaires ont un
fond blanc ou vert.
Avec firefox, cela se passe bien, avec IE, j'ai un fond completement gris.

Je ne vous demande pas de débugger mon probleme, mais juste de m'indiquer
quelle est la méthode à utiliser ou éventuellement les outils
pour rechercher ce type de probleme.



tr td { background: #ffc; }
tr.gr td { background: lime; }

<table border=1 width="80%">
<tr><td>1</td><td>2</td></tr>
<tr class="gr"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr class="gr"><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
<tr class="gr"><td>9</td><td>0</td></tr>
</table>



Bien, mais pas moyen de le faire automatiquement ? Parce quand on
rajoute une ligne, il faut tout décaler, et du coup, on peut se
planter. Il y a la solution de mettre un script pour régler tout ça,
mais la beauté de la chose...

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
J-F Portala
merci pour vos suggestions,
mais je pensais qu'il avait des outils (un peu plus évolués que le code
source de la page)
pour travailler avec les CSS et les différents navigateurs.

Dans le code source de la page, si on utilise des classes, on voit juste la
référence à la classe, sans avoir le détail.

Jeff
Avatar
Olivier Masson
Olivier Miakinen a écrit :

Difficile de te répondre comme ça, parce qu'une grande partie des bugs
d'Internet Explorer consiste juste en des trucs non implémentés. Il y a
peut-être des sites qui les recensent, mais sinon la lecture régulière
de ce groupe permet d'en connaître pas mal.




Commencer par utiliser ce travail plutôt exhaustif (hors navigateurs
manquants)

Par exemple, si tu a utilisé le sélecteur « + », alors ça ne peut pas
fonctionner dans IE6 (avec IE7 je pense que c'est bon mais je n'ai pas
vérifié).

Et si tu as utilisé la pseudo-classe CSS3 « :nth-child », alors il n'y a
sans doute pas encore beaucoup de navigateurs où cela marche.



Et donc on utilise un bibli JS comme les excellents prototype ou jquery
car 98% des internautes ont JS d'activé. Et les autres, c'est de la nav
texte donc on se fout de ce type de présentation.
Avatar
Olivier Masson
J-F Portala a écrit :
merci pour vos suggestions,
mais je pensais qu'il avait des outils (un peu plus évolués que le code
source de la page)
pour travailler avec les CSS et les différents navigateurs.

Dans le code source de la page, si on utilise des classes, on voit juste la
référence à la classe, sans avoir le détail.

Jeff





Tu as des tentatives mais jamais formidables.
J'ai essayé il y a peu le logiciel commercial pour Win "stylizer". Il
parait assez formidable mais en fait, il plante pas mal avec les rendus
IE (tiens donc...)
Sinon, utilisation de firebug + webdevelopper sur Firefox et la debugbar
+ compagnion JS pour IE.
Généralement FF3 = Opera 9.6 = Safari 3.1 = Chrome
Avatar
Pierre Goiffon
Sergio wrote:
tr td { background: #ffc; }
tr.gr td { background: lime; }

<table border=1 width="80%">
<tr><td>1</td><td>2</td></tr>
<tr class="gr"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr class="gr"><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
<tr class="gr"><td>9</td><td>0</td></tr>
</table>



Bien, mais pas moyen de le faire automatiquement ? Parce quand on
rajoute une ligne, il faut tout décaler, et du coup, on peut se planter.



Exactement, ce n'est pas pratique !
Aujourd'hui il n'existe pas de solution miracle malheureusement...

Il me semble de manière assez sûre que les sélecteurs CSS3 apportent des
réponses à ce prb ?
Trouvé rapidement cet article sur A List Apart :
http://www.alistapart.com/articles/zebratables
Qui renvoie vers :
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos

Sinon à ce jour on est obligé de se débrouiller... La plupart du temps
c'est un traitement serveur qui va générer de toute façon le tableau :
on a particulièrement besoin de ces alternances sur de gros tableaux,
ils sont souvent générés côté serveur depuis une source de données. Donc
on adapte ce traitement pour qu'il génère une fois sur 2 un class=...
On peut aussi le faire avec un script JavaScript... JQuery parait un bon
candidat pour réaliser ce genre de choses (on peut aussi le faire soit-même)
Avatar
Pierre Goiffon
Olivier Masson wrote:
Et donc on utilise un bibli JS comme les excellents prototype ou jquery
car 98% des internautes ont JS d'activé. Et les autres, c'est de la nav
texte donc on se fout de ce type de présentation.



C'est une opinion qui me parait un peu excessive ! JavaScript n'est pas
toujours utilisable et cela peut poser des prb... Les applications Web
présentant des grands tableaux de données sont souvent utilisées en
entreprise, et certaines bloquent carrément le Js sur leur proxy...

Tout dépend de quelle importance on accorde à cette décoration : si
c'est vraiment accessoire alors on pourra le faire en JavaScript
(attention à l'impact sur les performances client tout de même !)
Souvent cependant cette décoration est indispensable à la lecture des
données...
Avatar
Pierre Goiffon
Olivier Miakinen wrote:
Et si tu as utilisé la pseudo-classe CSS3 « :nth-child »



!!
Ouch mes excuses, ça fait 2 fois que je donne dans un fil une réponse
qui avait été déjà donnée... Décidemment, vivement les vacances ;)
Avatar
SAM
Le 12/2/08 9:22 AM, Sergio a écrit :
SAM a présenté l'énoncé suivant :

J'affiche un tableau dans lesquels les lignes paires et impaires ont
un fond blanc ou vert.



tr td { background: #ffc; }
tr.gr td { background: lime; }

<table border=1 width="80%">
<tr><td>1</td><td>2</td></tr>
<tr class="gr"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr class="gr"><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
<tr class="gr"><td>9</td><td>0</td></tr>
</table>



Bien, mais pas moyen de le faire automatiquement ?



Et Excel ? non ? jamais ?

Parce quand on
rajoute une ligne, il faut tout décaler, et du coup, on peut se planter.
Il y a la solution de mettre un script pour régler tout ça, mais la
beauté de la chose...



Le script peut être sur le serveur ...
database --> extraction --> modulo 2 --> code html kivabien

Sinon, le script JS n'est pas très lourd
et tant pis pour le paresseux IE ou ceusses sans JS
ce n'est finalement que du décorum, un accessoire.

--
sm
1 2 3 4 5