Problème de css sous FirefoxRésolu

Question

Bonjour à tous,

Je suis récement passé à firefox alors que j'utilisais internet
explorer avant celà. J'avais à l'époque un site qui passait très bien
sous explorer et que j'ai décidé de dépoussiérer un peu. 
Or j'ai été surpris de voir que sous firefox le style.css joint à
ma page html n'est pas du tout pris en compte. J'ai eu beau chercher
dans ce forum, je n'ai pas encore trouvé ma solution, malgré plusieurs
essais. 

Voici l'index de mon site:  http://asianspirit.free.fr/

ainsi que le code de ma page css:

BODY {

scrollbar-face-color: #6D6D6D; 

scrollbar-shadow-color: #404040;

scrollbar-highlight-color: #ffffff;

scrollbar-3dlight-color: #404040; 

scrollbar-darkshadow-color: #000000; 

scrollbar-track-color: #404040; 

scrollbar-arrow-color: #000000;

.titre {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000000;

font-weight: bold;

}

.titre {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #000000;

}

.soustitre {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #000000;

}

.texte {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000;

}

}

.textepetit {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

color: #000000;

}

a.liensMENU:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #427BC8;

text-decoration: none;

font-weight: bold;

}

a.liensMENU:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #427BC8;

text-decoration: none;

font-weight: bold;

}

a.liensMENU:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #FFFFFF;

text-decoration: none;

font-weight: bold;

text-transform: none;

}

a.liensMENU:active {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #FFFFFF;

text-decoration: none;

font-weight: bold;

}

a.liensCOPY:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

text-decoration: none;

font-weight: bold;

}

a.liensCOPY:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

text-decoration: none;

font-weight: bold;

}

a.liensCOPY:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

text-decoration: underline;

font-weight: bold;

text-transform: none;

}

a.liensCOPY:active {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

text-decoration: underline;

font-weight: bold;

}

a.liensSIMPLE:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #427BC8;

text-decoration: none;

}

a.liensSIMPLE:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #427BC8;

text-decoration: none;

}

a.liensSIMPLE:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #427BC8;

text-decoration: underline;

text-transform: none;

}

a.liensSIMPLE:active {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #427BC8;

text-decoration: underline;

}

.lienSOUSTITRE:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #000000;

text-decoration: none;

}

.lienSOUSTITRE:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #000000;

text-decoration: none;

}

.lienSOUSTITRE:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #000000;

text-decoration: underline;

text-transform: none;

}

.lienSOUSTITRE:active {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

color: #000000;

text-decoration: underline;

}

.texteclair {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #FFFFFF;

}

Je précise que je travaille sous dreamweaver (au cas où ^^). Je
remercie d'avance les personnes qui pourront me sortir de ce pétrin.
Amicalement, Merylloo.

PetoleTeam · Accepted Answer

B
onjour...
Un petit tour sur Outils -> Console Javascript de FireFox t'indiquerait que tout ce qui concerne scrollbar est typique à IE et qu'il manque

BODY { 
scrollbar-face-color: #6D6D6D; 
scrollbar-shadow-color: #404040; 
scrollbar-highlight-color: #ffffff; 
scrollbar-3dlight-color: #404040; 
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #404040; 
scrollbar-arrow-color: #000000; 
}   <-- ICI --
.titre { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #000000; 
font-weight: bold; 
} 

sinon il reste le validateur CSS http://jigsaw.w3.org/css-validator/

;0)

Merylloo · Answer

Bonjour,

Je te suis extrêmement reconnaissant, en effet le petit } oublié était fondamental, maintenant presque tout roule à merveille. Concernant la scrollbar, je l'ai laissée uniquement pour internet explorer, car cela fait quand même plus joli avec que sans. 
Sinon, concernant le code source, macromedia dreamweaver ainsi qu'un validateur html m'indiquent d'autres erreurs, mais malheureusement je ne comprends pas comment les corriger, donc à moins qu'une âme charitable ne m'aide à les corriger, je vais laisser tel quel car maintenant sur firefox et IE, en apparence à peu prêt tout roule. 

Pour les erreurs restantes, j'ai remarqué que sous firefox des bordures apparaissent en haut et sur les côtés "extérieurs" du site, alors que rien de tel n'apparaît sous ie. De plus lors de l'apparition de la scrollbar, le site se décale légèrement sur la gauche, ce qui m'ennuie un peu (le changement de couleur pour la scrollbar étant permis sous ie, elle apparaît tout le temps, donc le site n'a pas de décalage visible). 
Le reste des erreurs apparaît dans mon code source, mais malheureusement je ne vois pas comment les corriger comme dit précédemment. J'ai notamment des problèmes avec des attribut de style <td background="fondcontenu.gif"> par exemple ou encore  qui n'ont pas l'air d'être reconnus par l'ensemble des navigateurs. 

Encore merci à toi pour ton aide cruciale, amicalement
Merylloo

Merylloo · Answer

Rebonjour (décidement xD),

Je tiens jute à rajouter le message d'erreur suivant : 

Erreur : [Exception... "'Component does not have requested interface' when calling method: [nsIInterfaceRequestor::getInterface]"  nsresult: "0x80004002 (NS_NOINTERFACE)"  location: ""  data: no]

qui apparaît dans ma console d'erreur de firefox, une fois sur mon site. A quoi celà est-il dû? Désolé d'user et d'abuser de votre temps, mais vous me permettez d'avancer et de corriger les defauts de mon site et faites par la même occasion un heureux. 

Je vous remercie pour tout, amicalement
Merylloo

PetoleTeam · Answer

B
onjour...
pour avoir le même effet suivant les navigateur autant mettre 
<table width "100" align"center" cellpadding ="0" cellspacing ="0"  style= "border: 1px solid #333333;" >
 pour la table et non border ="1" et bgcolor="#333333" qui est visuellement pris en compte différement...

- en régle générale il devient préférable de passer par les styles que par les attributs

- pour l'image vérifie qu'elle est bien présente sur ton serveur...

- pour l'erreur je ne l'ai pas sous FireFox 1.5.0.9

;0)

Merylloo · Answer

Je te remercie vivement pour l'aide apportée, j'ai remplacé les attributs bgcolor et border par ce que tu m'a noté et tout fonctionne à merveille. Pour les styles je vais faire mes propres recherches sur le net pour trouver les commandes. 
Je suis rassuré que l'erreur n'apparaisse pas chez toi, ça ne doit pas être bien grave dans ce cas ^^.

Le dernier point que j'aimerai éclaircir s'il existe une solution est le suivant: avec firefox lors de l'apparition de la scrollbar, le site se décale
légèrement sur la gauche (au contraire de sur ie, où elle apparaît tout le
temps, donc le site n'a pas de décalage visible). Penses tu qu'il soit possible de règler ce problème? 

Je n'abuserai pas plus de ton temps et te remercies encore une fois, amicalement
Merylloo

Merylloo · Answer

RAJOUT: Je t'ai ajouté la page "musique" pour que tu puisses juger de celà.

PetoleTeam · Answer

Pour le dernier point c'est une façon de gérer l'espace document qui est différente pour chaque navigateur...
IE -> Toujours
FireFox, NetScape et Opera -> si nécéssaire uniquement...

La solution ??
;0)

PetoleTeam · Answer

en furetant je suis tombé sur ce site qui a à peu près la même mise en page que toi, est qui a contourné le probléme avec un  les pages étant affichée dans une IFRAME encapsulée dans une table...




;0)

Merylloo · Answer

En effet, cela permet de garder le même alignement, que ce soit avec une différente résolution ou des pages plus "longues". Je vais chercher comment faire, je n'ai plus rien à demander ^^. Merci beaucoup pour ton aide et ta patience, à bientôt.

Amicalement,
Merylloo

Problème de css sous Firefox

9 réponses

Votre réponse

Discussions similaires