Problème de compatibilité Firefox/CSS Résolu/Fermé

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

thifoolish · Answer

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.

_goni · Answer

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 ;)

Dgs- · Answer

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. ^^

Dgs- · Answer

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.

thifoolish · Answer

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

Prez · Answer

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

Problème de compatibilité Firefox/CSS

6 réponses

Discussions similaires