[Résolu]Problème de CSS avec Firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu]Problème de CSS avec Firefox

smilm

Bonjour,

J'ai un problème avec FireFox.
J'aimerais mettre en gras deux des liens de mon menu.

Sous IE, ceci fonctionne, mais pas sous FireFox:
<a href="http://www.afterend.com/forums">Forum</a>

Donc je pensais essayer de passer par les CSS pour mettre Forum en gras.
<a href="http://www.afterend.com/forums">Forum</a>

Ceci marche sous IE et sous FireFox.

Voici les CSS concernés:

Code :

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #4c1b21;
text-decoration: underline;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #4c1b21;
text-decoration: underline;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #4c1b21;
text-decoration: underline;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #CC0000;
text-decoration: underline;
}
.boldlink{
font-weight: bold;
}

Merci d'avance pour votre aide.

Message cité 1 fois
Message édité par smilm le 11-07-2006 à 14:41:37

---------------
AfterEnd: Batissez un nouveau monde

Publicité

Adrienm

Salut !

Chez moi cela marche :

smilm a écrit :

<a href="http://www.afterend.com/forums">Forum</a>

J'ai testé avec Firefox et IE pourtant !

Salutations

---------------
Adrien

smilm

Cela fonctionne car tu n'as pas pris en compte les CSS "a:".

En effet, je viens de voir que si je supprime les CSS "a:..." et garde ma css boldlink, elle fonctionne très bien et mes liens sont en gras.
Un problème de priorité dans les CSS à ce que je comprends donc. Comment passer mon span en priorité ?

Edit:
Non je dis des bétises. Si j'ajoute un attribut à ma cass boldlink:
.graslink {
font-style: oblique;
font-weight: bold;
color: #0066CC;
}
Alors mon lien forum devient oblique, bleu, mais pas gras. Bizarre.

Message édité par smilm le 11-07-2006 à 13:24:12

---------------
AfterEnd: Batissez un nouveau monde

AlphaZone

Au lieu de t'embêter avec une classe sur un span, pourquoi est-ce que tu ne redéfinirais pas la balise a avec un nom comme lien_gras par exemple.

Sinon tu utilise qui est la même chose que strong.

Tu n'as pas besoin de redéfinir la famille de police dans ton CSS à chaque état de ton lien.

Tu définis dans un permier temps la balise a, avec les paramètres qui conviens. Ensuite selon les états, tu applique ce que tu veux modifier.

Message cité 1 fois

mIRROR

Chevreuillobolchévik

chez moi ton code marche bien
peut etre que la font est trop petite pour que tu remarques la difference entre bold et normal :whistle:
mais on pourrait vite vait simplifier et dehors le span

Code :

a {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #4c1b21;
text-decoration: underline;
font-weight: bold;
}
a:hover {color: #CC0000;}

oops mega toasted

Message édité par mIRROR le 11-07-2006 à 13:42:32

xtof_83

Freeride Spirit

AlphaZone a écrit :

n'a aucun sens sémantique, il est donc à bannir

smilm

Merci, j'ai rédéfini mes CSS "a:.." comme vous me l'avez indiqué.

Je suis perdu là, je ne sais pas trop comment cela est arrivé mais...
J'ai maintenant des liens plus grand que d'autres.

Ici, "Témoignages" est plus grand que "AfterEnd ?" (visite guidée est petit, forum est grand et en gras)

Code :

<img src="imgdesign/designv3/puce.gif" width="11" height="11"> <a href="index.php?page=demo_v2">Visite Guidée</a>
<img src="imgdesign/designv3/puce.gif" width="11" height="11"> <a href="index.php?page=temoignages">Témoignages</a>
<img src="imgdesign/designv3/puce.gif" width="11" height="11"> <a href="index.php?page=afterend">AfterEnd ?</a>
<img src="imgdesign/designv3/puce.gif" width="11" height="11"> <a href="http://www.afterend.com/forums">Forum</a>

Je n'ai strictement aucune idée de ce qui distingue ces liens.

Par ailleurs, le problème se pose uniquement sous FireFox. Sous IE, tout les liens sont à la même taille mais les liens en grand sont dans une autre police...

Message édité par smilm le 11-07-2006 à 14:19:35

---------------
AfterEnd: Batissez un nouveau monde

AlphaZone

@xtof > Désolé pour le , je ne savais pas trop.

@smilm > Il doit y'avoir un conflit de CSS, je pense. Montre nous ton CSS please

smilm

Tout est là:

Code :

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
}
.txtmenu {
font-family: "Trebuchet MS";
font-size: 13px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #990000;
}
.colortab {
background-color: #DFDFDF;
margin: 5px;
border: 1px solid #CC6633;
}
.tabin {
border: 1px solid #993333;
}
.formu {
font-size: 14px;
color: #000000;
border: 1px dashed #993300;
}
.cellulegris1 {
background-color: #CCCCCC;
}
.cellulegris2 {
background-color: #D5D5D5;
}
.celluletitre {
background-image: url(../imgdesign/celluletitre.jpg);
}
.cellulesoustitre {
background-color: #F9E1C1;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #4c1b21;
text-decoration: underline;
}
a:hover {
color: #CC0000;
}
.bouton {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #CCCCCC;
color: #000000;
font-style: normal;
font-weight: 100;
text-transform: none;
border-top: 1px ridge #E9E9E9;
border-right: 1px outset #E9E9E9;
border-bottom: 1px outset #E9E9E9;
border-left: 1px ridge #E9E9E9;
cursor: hand;
?);
}
.cellulebas {
background-image: url(../imgdesign/cellulebas.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.newsbas {
background-image: url(../imgdesign/news_bas.jpg);
}
.newshaut {
background-image: url(../imgdesign/news_haut.jpg);
}
.tabmenu {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
}
.emptyclass {
border: none;
}
.mpmenu {
background-image: url(../imgdesign/mp_menu.gif);
}
.mphaut {
background-image: url(../imgdesign/mp_haut.jpg);
}
.mpmessage {
background-color: #CCCCCC;
}
.cellulebaslarge {
background-image: url(../imgdesign/cellulebas_large.jpg);
}
.cellulecomment {
background-image: url(../imgdesign/cellule_comment_alliance.jpg);
}
.cellulecomment2 {
background-image: url(../imgdesign/cellule_comment_alliance2.jpg);
}.deroulantvillage {
background-color: #D8FDC8;
border: medium none #D1FDB5;
width: 190px;
}
.bg {
background-attachment: fixed;
}
.cellulestats {
background-image: url(../imgdesign/cellule_stats.jpg);
border-top: 1px solid #000000;
border-right: 1px none #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
}
.border1 {
border: 1px solid #000000;
}
.barreblackup {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
.celluleachat {
background-image: url(../imgdesign/cellule_stats.jpg);
border-top: 1px solid #000000;
border-right: 1px none #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
}
.noborder {
BORDER: 0px;
}.menuantirepet {
background-repeat: repeat-y;
}
.liensmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
color: #000000;
text-decoration: none;
}
.villagecouranttxt {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
.graslink {
color: #FF0000;
}

Message édité par smilm le 11-07-2006 à 14:23:54

---------------
AfterEnd: Batissez un nouveau monde

AlphaZone

Tu t'embête énormément avec l'attribut font-family. Tu l'aurais défini dans body et on en parlait plus.

Sinon tu as oublié de définir ta balise a. C'est probablement pour ca.

Publicité

smilm

Autant pour moi, j'ai compris !

Les liens visités sont aggrandis.
Donc il faut bien appliqués les CSS de taille partout sur les liens. Je veux dire conserver les CSS détaillés et non pas optimisé.

Bref, je suis revenu à mon point de départ.
Et monlien ne passe pas sous firefox.

Message édité par smilm le 11-07-2006 à 14:26:27

---------------
AfterEnd: Batissez un nouveau monde

mIRROR

Chevreuillobolchévik

non pas si tu laisses dans a
(pourquoi as tu transformé mon a en a:link ? [:petrus dei] )

sinon tu peux declarer ainsi

Code :

a:link, a:visited, a;active, a:hover {
mes propriétés...
}

Message édité par mIRROR le 11-07-2006 à 14:30:37

smilm

Ca marche, il fallait définir "a" tout court.
En fait l'hypothèse de départ était la bonne.
Mes liens sont trop petit sous firefox pour que le gras puisse le mettre en valeur.

J'ai un problème avec la taille de mes liens en fait.
x-small est minuscule sous firefox alors que c'est "normale" sous IE.
Par contre, small est bien sur firefox mais beaucoup trop grand sous IE.

Je reviens avec des questions plus claires.

Message édité par smilm le 11-07-2006 à 14:33:43

---------------
AfterEnd: Batissez un nouveau monde

AlphaZone

Ta essayé de mettre la taille de ta police en normale sous Firefox (CTRL + 0) ? [:barthaliastoxik]

smilm

Merci beaucoup à vous tous pour votre réactivité. C'est toujours un plaisir de se faire aider par vous. En fait mon problème était ailleurs mais grace à vos remarques j'ai pu trouver la solution et apprendre quelques petites choses.

En fait, les tailles de police du type "small" "x-small" ect sont relatives aux navigateurs. Ainsi, sous IE elles seront en général bien plus grande que sous FireFox.
J'ai donc passé ces données en valeurs absolu (12pt); de cette façon, la taille de la police est la même sur les deux navigateur, juste comme il faut.

Par ailleurs, en ce qui concerne mon problème de mise en gras, le problème venait de firefox (hé oui !) qui ne voulait passer en gras ce que je lui demandais car c'était trop petit (et cela aurait était sans doute illisible donc l'intelligent FF ne passe pas les liens en gras)

Merci encore à vous tous.

@alphazone: oui, j'ai bien vérifié, sous IE et sous FF, la taille de la police était configuré en moyenne.

Message cité 1 fois
Message édité par smilm le 11-07-2006 à 14:41:14

---------------
AfterEnd: Batissez un nouveau monde

mIRROR

Chevreuillobolchévik

si si c est bien gras j ai essayé chez moi fais deux liens cote a cote un en gras l autre en normal
parce que justement tu peux faire ctrl+ a volonté donc il FAUT que le gras soit appliqué

Pitsy

smilm a écrit :

En fait, les tailles de police du type "small" "x-small" ect sont relatives aux navigateurs. Ainsi, sous IE elles seront en général bien plus grande que sous FireFox.

...

@alphazone: oui, j'ai bien vérifié, sous IE et sous FF, la taille de la police était configuré en moyenne.

Dans firefox, cela va dépendre de la taille de police par défaut que tu as choisi.
Si tu vas dans le menu outils / options / contenu tu verras quelle taille est définie par défaut. En jouant sur cette taille, tu constateras que toutes les tailles relatives (genre les x-small ou tailles en em) varient, et que donc la taille "normale" n'est pas la même suivant la taille choisie par défaut. Chez moi, la police par défaut à 16px correspond à la même taille de caractères que sur IE (donc le small, x-small,... ont le même rendu).

smilm

Merci pour ces informations Pitsy.

---------------
AfterEnd: Batissez un nouveau monde

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu]Problème de CSS avec Firefox

Sujets relatifs
probleme avec jointure sur 3 tables	Equivalent du system("pause") sous solaris [RESOLU]
Police et Firefox	[resolu] Initialisation d'un tableau
problème session register	[Résolu] Bug d'IE avec les caractères accentués.
[resolu] Plage trop grande!	[résolu]récupération nom de dossier pour images
Annuler un évènement javasript (RESOLU)	[Resolu] Probleme avec une CSS de Background sous Firefox
Plus de sujets relatifs à : [Résolu]Problème de CSS avec Firefox

Page générée en 0.122 secondes