Contours des tableaux sous Mozilla

[skyneur]

Bonjour,

J'ai des problèmes au niveau de la couleur pour le contours des tableaux et uniquement sous mozilla firefox.

Voici mon site:

http://www.cadomax.com

J'aimerai que le couleur soit la même que sous internet explorer mais je ne sais pas comment faire.

Merci de votre aide !

Emmanuel

[Sarc]

Bonjour,

J'ai la même chose sur les deux navigateurs, juste une différence d'épaisseur (bordure plus mince sous Firefox...), ce qui entraîne une différence de perception.

Mais les couleurs sont 100% identiques chez moi

[skyneur]

Oui les couleurs en elle même restent les même mais sont beaucoup plus claire sous mozilla voir casi invisible sur certaines pages comme celle ci : http://www.cadomax.com/elevage.php

Ce qui rend la page vraiment moche ...

Il doit bien y avoir un moyen pour remedier à ce problème ?

[Sarc]

Je sais pas si je vais te répondre, mon site est pas dans la liste des bons jeux du web

En fait, tu as des gros problèmes de code en général dans ta page, et problème de code implique problèmes d'affichage, c'est quasiment certain.

Dans un premier temps, même si ça n'a pas de rapport avec ton problème, les listes de liens avec des puces, ce n'est pas <a><br><a>...

Il faut utiliser la balise liste, justement, qui permet en plus de changer l'image de la puce et de ne pas avoir à recopier à chaque fois la balise img...

<img src="img/puceb.jpg" alt="puce"> <a href="http://www.cadomax.com/mailsremuneres.php">Mails rémunérés</a><br>
				  <img src="img/puceb.jpg" alt="puce"> <a href="http://www.cadomax.com/surfremunere.php">Surf rémunéré </a><br>
				  <img src="img/puceb.jpg" alt="puce"> <a href="http://www.cadomax.com/clicsremuneres.php">Clics rémunérés</a><br>

deviendra

<ul><li><a href="http://www.cadomax.com/mailsremuneres.php">Mails rémunérés</a></li>
<li><a href="http://www.cadomax.com/surfremunere.php">Surf rémunéré</a></li>
<li><a href="http://www.cadomax.com/clicsremuneres.php">Clics rémunérés</a></li></ul>

De plus, les liens en absolu... mouais, tu peux les écrire en relatifs, tu gagnes encore un ko sur l'ensemble de ta page, je pense pas que ça fasse de mal aux petites connexions, et moins de texte à lire pour les moteurs de recherche.

Dans l'ensemble, tu ne sépares pas assez l'affichage brut et les styles. Ta feuille de style est bien courte, et ta page est remplie d'attributs parfois "déconseillé" par le W3C... En outre, je pense que c'est bordercolor qui n'est pas aimé de Firefox.

En rajoutant un style à la fin de ta feuille, par exemple

table, td{border:1px solid blue}

On voit bien que tes tables auront une bordure au même titre que pour IE, de la même taille, sans aucun problème. A toi après de donner des classes aux bonnes tables, par exemple

<table class="bleu">

et de mettre ta feuille de style en conséquence pour que l'affichage se fasse correctement sous tous les navigateurs...

De plus, dans Opéra, les bordures ne s'affichent pas du tout en couleur avec ton code actuel.

(Juste une chose hors-sujet encore... Ta page d'accueil est accessible via l'adresse de ton site, mais il y a également un lien qui va vers index.php... Ce lien, tu ferais mieux de le faire aller vers la racine (<a href="/">), comme ça les moteurs de recherche ne risqueront pas de prendre deux fois la même page. )

Voilà j'espère t'avoir avancé.

[skyneur]

Bonjour,

On va dire "je ne suis pas très très doué "

J'ai simplement reussi à obtenir ce resultat:

http://www.cadomax.com/test.php

Si je mets:

table, td{border:1px solid blue}

J'ai tous mes tableaux bleus

Je mets donc:

.blue{border:1px solid blue}

Seulement de dois mettre .blue devant chaque cellule, ça va être long :S, il doit y avoir plus rapide

Sinon pour les menus, y a t'il un moyen de definir la marge ? Ils sont très decalés...

Merci

[Sarc]

Pour le CSS :

.blue, .blue td{border:1px solid blue}

Ensuite tu mets la classe blue seulement sur le tableau que tu veux customiser. Ce code CSS indique que pour l'élément de classe blue, ainsi que pour la totalité des td contenus dans cet élément, la bordure sera bleue. Donc quand tu l'appliques au tableau directement, tous les td du tableau auront la propriété.

Pour les menus, tu peux définir la marge en modifiant le padding et le margin pour ul et li dans ta feuille de style.

ul, li{padding:0;margin:0}

D'une manière générale, il est conseillé de mettre toutes les balises à 0 par défaut (*{margin:0;padding:0}, puis de changer au cas par cas, pour que l'affichage soit uniformisé sur tous les navigateurs.

Pour changer l'image de la puce, tu trouveras aisément sur Google (recherche image puce html css, ça devrait aller..)

Bonne continuation

[skyneur]

Ah pour les tableaux ça marche

Par contre au niveau des menus, si je mets le padding et la marging à 0, le titre des menus commence en dehors de la case. Et si je mets sur 1 c'est trop à droite.

Mais ce problème sur les menus est un détail très minime ? c'est pas ben grave sinon ...

[Sarc]

1 n'existe pas. Je te conseille de prendre connaissance un peu mieux du CSS, qui est super utile pour faire un site propre, agréable, accessible, etc

ul,li{padding:0 20px;}

Tiens avec ça, ça rentre bien dans la case. C'est en pixels non en "binaire" 0 ou 1...

Le 0 veut dire "padding en haut et en bas" et le 20px "padding à gauche et à droite".

Détail ? C'est avec beaucoup de petits riens qu'on fait un grand tout.

Je peux t'assurer que ce n'est pas un détail, la gestion des menus, c'est même cruciale sur un site.

[skyneur]

Mais la marge entre la puce et le texte reste toujours grande.

N'y a t'il pas moyen de la retrecir de sorte que le titre de mon menu tienne sur une ligne ?

Ici par exemple, concours gratuits tient sur 2 lignes ...

[skyneur]

Bon j'abandonne pour les menus :S

J'avais pas vu mais il y avait de gros bugs sous IE j'ai preferé tout remettre comme avant.

En tous cas merci beaucoup pour ton aide !

[Florent V.]

D'une manière générale, il est conseillé de mettre toutes les balises à 0 par défaut (*{margin:0;padding:0}, puis de changer au cas par cas, pour que l'affichage soit uniformisé sur tous les navigateurs.

Ça dépend. Pour ma part, je trouve que c'est plutôt une mauvaise pratique. Les marges ou padding par défaut problématiques ne sont pas nombreux, et mieux vaut éviter d'enlever certaines marges par défaut qui participent de la lisibilité d'un document. Car si on met tout à zéro, il faudra tout re-spécifier sans rien oublier.

C'est avec ce genre de pratique qu'on se retrouve avec des sites qui, tout à coup, ont certains contenus complètement collés les uns aux autres. Un minimum de prudence s'impose donc.

[Sarc]

En fait dans tous les cas, la prudence est de mise.

Ce que je voulais dire, c'est que si on met tout à 0, et qu'on règle les balises qu'on utilise, on est beaucoup moins étonné quand on passe d'un navigateur à l'autre... C'est vrai que les marges problématiques sont peu nombreuses, mais certains sites doivent se régler au pixel près, et c'est là qu'une marge d'un pixel de différence entre deux navigateurs peut faire la différence de façon très visible...

En tout cas, pour les ul et li, c'est clair que les navigateurs ont décidé de pas se mettre d'accord...