Rechercher : dans
Par :

Problème de compatibilité Firefox/CSS

Dernière réponse le 15 jun 2008 à 12:42:47 Dgs-, le 24 jan 2007 à 19:45:04 
 Signaler ce message aux modérateurs

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, Dgs.

Configuration: Windows XP
Firefox 2.0.0.1

Meilleures réponses pour « Problème de compatibilité Firefox/CSS » dans :
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...

1

thifoolish, le 25 jan 2007 à 11:00:37

Bonjour,

Certaines versions des navigateurs de type Netscape notamment, ne prennent pas en compte les instructions liées à la mise en page de l'environnement (tout ce qui touche aux éléments du navigateur web utilisé, comme les instructions scrollbar, par exemple, qui sont limitées aux utilisateurs de IE et d'Opera)

Cordialement. On ne court jamais assez vite derrière le Temps.
C'est pour cela qu'on devient trop vieux avant d'avoir vécu.­

Répondre à thifoolish

2

_goni, le 25 jan 2007 à 11:12:07

Salut,
En fait, il faut trouver des mises en page dérivées. IE et Firefox n'interprètent pas de la même manière le CSS. Souvent, tu dois passer beaucoup de temps pour que tu es le même rendu sur les deux. C'est pas simple pcq tu commence par IE et FF mais après tu veux qu'il fonctionne pour Mac, Linux mais c'est vraiment pas simple. En tout cas c'est cool les gens qui pensent aux utilisateurs Firefox.
Merci à toi et bon courage ;) Benoit.
Enlèves tes doigts sales de mon clavier.

Répondre à _goni

3

Dgs-, le 25 jan 2007 à 13:42:40

Bonjour,

Merci de vos réponses, je vais tenter de biaiser comme me l'a conseillé _goni. Je trouve ça assez embettant que Firefox ne réagisse pas de la même façon qu'IE face aux .css, le résultat est vraiment plus joli avec une scrollbar colorée et css fait gagner pas mal de temps et de lisibilité au codage. M'enfin, j'espère bien trouver une solution d'ici là.
Merci encore à vous deux, à une prochaine fois. ^^

Répondre à Dgs-

4

Dgs-, le 26 jan 2007 à 13:56:13
  • +1

Pour ceux que ça intéresse j'ai réglé les problèmes principaux.

Dans mon code css il manquait:

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;
} <-- CECI --
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}

Dans ma page de code html j'ai remplacé border="1" et bgcolor="#333333" par:

<table width ="100" align ="center" cellpadding ="0" cellspacing ="0" style= "border: 1px solid #333333;">

Voilà, un grand merci à PetoleTeam, qui m'a grandement aidé.

A bientôt.

Répondre à Dgs-

5

thifoolish, le 5 sep 2007 à 16:49:52

Accessoirement tu avais mis une parenthèse fermante qui ne sert à rien plus bas dans ton code,
mais mes remarques de l'époque concernaient le bgcolor border align etc... qui sont depuis quelques années éjectées du code html pour être avantageusement remplacées par des css...
Pareil pour tous les passages de styles... C'est une mauvaise manière de coder que de tout mélanger... On ne court jamais assez vite derrière le Temps.
C'est pour cela qu'on devient trop vieux avant d'avoir vécu.

Répondre à thifoolish

6

 Prez, le 15 jun 2008 à 12:42:47

Salut à tous,
J'ai également un pb de compatibilité entre IE et FF dans un CSS.
Le problème se situe essentiellement dans la mise en page.
L'entête et les différents blocs (menu, entete, pied de page...) ne se positionnent pas comme je le souhaiterai.
Sous IE aucun soucis, mais sous FF, c'est la cata.
Voici le CSS:
/*=========Mise en forme générale ===========*/
#contener {
position: relative;
min-height: 100%;
width: 1024px;
height: 700px;
voice-family: "\"}\"";
voice-family: inherit;
}

body {
margin: 0;
padding: 10px;
font-size: 0.8em;
background-color: #ffffff; /*couleur de fond blanche*/
}

#header {
height: 0px;
background-color: #0a76c0;
margin-bottom: 0;
}

#onglets {
text-align: right;
color: black;
background-color: #0a76c0;
background-repeat: repeat-y;
background-position: top left;
padding: 1px 1px 1px 1px;
border-bottom: 1px solid #0a76c0;
margin: 0;
}
#onglets ul {
margin-bottom: 0;
}
#onglets li {
display: inline;
list-style-type: none;
margin: 0;
}
#onglets a {
text-decoration: none;
color: #FFFFFF;
background-color: #0a76c0;
padding: 1px 1px 1px 1px;
border: 1px solid #0a76c0;
}
#onglets a:active {
background-color: white;
}
#onglets a:hover {
text-decoration: none;
color: #0F4D2A;
background-color: white;
padding-bottom: 1px;
border-bottom: none;
}

#menu {
position: absolute;
padding: 0;
left: 9px;
width: 100px;
background-color:#ffffff;
}

#menud {
position: absolute;
padding: 0;
right: 7px;
width: 100px;
background-color:#ffffff;
}
#frame {
margin-left: 180px;
margin-right: 180px;
width: auto;
height: 700;
background-color:#ffffff;
overflow: auto;
}
#iframe {
width: 80%;
}
#footer {
height: 50px;
background-color: #0a76c0;
}
#footer a {
color: #0F4D2A;
text-decoration: none;
}
p {
margin: 0 0 5px 0;
}

/*========= Mise en forme menu ==============*/
#menu dt {
cursor: pointer;
background: #ffffff;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid blue;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #ffffff;
border: 1px solid blue;
}


div#ex1 ul#menulist li ul{ display:none; }

div#ex1 ul#menulist li:hover>ul{ display:block; }

div#ex1 ul#menulist {
font-size: 12px;
color: #f3c600;
position: static;
left: 0px;
margin: 0px;
}

div#ex1 ul#menulist, div#ex1 ul#menulist ul {
list-style:none;
margin:0;
padding:0;
width:13em;
_width:13em;
background-color: #ffffff;
border: 1px solid;
border-top-color: #ffffff;
border-left-color: #ffffff;
border-bottom-color: #ffffff;
border-right-color: #ffffff;
}

div#ex1 ul#menulist ul{
position:absolute;
top:-1px;
left:12.7em;
}

div#ex1 ul#menulist li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}

div#ex1 ul#menulist a{
display:block;
width:100%;
text-decoration: none;
text-indent: 1em;
width: 12.7em;
padding: 3px 0;
}

div#ex1 ul#menulist li:hover, div#ex1 ul#menulist li a:hover {
color: #FFFFFF;
background-color: #0a76c0;
}

div#ex1 ul#menulist a {
color: #0F4D2A;
text-decoration: none;
}
#div#stat {
font-size: 12px;
color: 0f4d2a;
position: relative;
left: 10px;
margin-top: 20px;
margin-bottom: 20px;
width: 130px;
}

/*========= Mise en forme menud ==============*/

div#ex2 ul#menulistd li ul{ display:none; }

div#ex2 ul#menulistd li:hover>ul{ display:block; }

div#ex2 ul#menulistd {
font-size: 12px;
color: #f3c600;
position: static;
left: 0px;
margin: 0px;
}

div#ex2 ul#menulistd, div#ex2 ul#menulistd ul {
list-style:none;
margin:0;
padding:0;
width:13em;
_width:13em;
background-color: #ffffff;
border: 1px solid;
border-top-color: #ffffff;
border-left-color: #ffffff;
border-bottom-color: #ffffff;
border-right-color: #ffffff;
}

div#ex2 ul#menulistd ul{
position:absolute;
top:-1px;
left:12.7em;
}

div#ex2 ul#menulistd li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}

div#ex2 ul#menulistd a{
display:block;
width:100%;
text-decoration: none;
text-indent: 1em;
width: 12.7em;
padding: 3px 0;
}

div#ex2 ul#menulistd li:hover, div#ex2 ul#menulistd li a:hover {
color: #f3c600;
background-color: #FFFFFF;
}

div#ex2 ul#menulistd a {
color: #0F4D2A;
text-decoration: none;
}
#div#stat {
font-size: 12px;
color: 0f4d2a;
position: relative;
left: 10px;
margin-top: 20px;
margin-bottom: 20px;
width: 130px;
}
/*==============Formlaires ====================*/
form {
backgroung-color: #ffffff;
background-image: url(./images/bandeau.jpg);
width: 520px;
padding: 20px;
color: #ffffff;
}
form#rech {
background-color: #ffffff;
background-image: url(./images/bandeau.jpg);
width: 250px;
padding: 20px;
color: #ffffff;
}
label { display: block; }
label#ad { display: inline; }

#email, textarea {
width: 400px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#realname, textarea {
width: 400px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#adresse, textarea {
width: 400px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#codepostal, textarea {
width: 80px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#ville, textarea {
width: 300px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#telephone, textarea {
width: 200px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#tel, textarea {
width: 200px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#objet, textarea {
width: 400px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#nom, textarea {
width: 200px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
#typeannonce, textarea {
width: 400px;
border: 1px solid #0F4D2A;
margin-bottom: 1em;
}
textarea { height: 10em; }
input:focus, textarea:focus
{
background-color: #ffffff;
}

La page si vous voulez jeter un oeil: http://www.colayrac.fr
Merci de me donner un coup de main.
@+++
Prez

Répondre à Prez