Problème de compatibilité Firefox/CSS [Résolu]

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.

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

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

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.

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

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