Problème de compatibilité Mozilla & IE

rafale69300 -  
Bonjour tout le monde,

Ce problème est récurent, je sais que sa vient par rapport à la feuille de style qui est pas interprété de la même manière par les navigateurs.

Je vous laisse l'adresse de mon site : http://gescle.free.fr/ C'est mon projet de fin d'année de 1ère année de bts.

Je vous laisse le code de ma feuille de style, si quelqu'un peut m'aider à la corriger pour que ce soit compatible entre IE & mozilla. 

body {
margin: 0;
padding: 0;
text-align : left;
background : #ECE9D8  ;
font-family : tahoma, arial ; 
font-size : 0.7em ; 
color : #666666 ; 
}


img {border : none ; }




/* HEADER
  *******************************************************/

#header {
position : relative ; 
 height : 197px ;
 background : url(bg-header.jpg) repeat-x;
}


#header h1 {
position : absolute ; 
margin : 0;
padding : 0;
top : 20px;
left : -10px; 
height : 98px; 
width : 190px ; 
background : url(logo.jpg) no-repeat                ; 
}


#header h1 span {
position : absolute ; 
top : -9999px;
left : -9999px;
 }

#header  .centrage {
position : relative ; 
width : 754px ;
margin : 0 auto ; 
 height : 197px ;
 }

#header .centrage ul {
margin : 0;
padding : 0;
list-style : none ; 
position : absolute ; 
right : 0 ; 
bottom : 4px ; 
}


#header .centrage  li {
float : left ; 
}


#header .centrage li a {
display : block ;
height : 30px;
line-height : 30px; 
width : auto ; 
padding : 0 10px; 
margin : 0 0 0 5px; 
text-decoration : none ;
color : #fff;
text-transform : uppercase ; 
}

#header .centrage li a:hover {
color : #ccc;
}

#header .centrage  li #home { background : url(menu-bg-1.jpg) repeat-x                ; }

#header .centrage  li #about { background : url(menu-bg-2.jpg) repeat-x                ; }


#header .centrage  li #link {background : url(menu-bg-3.jpg) repeat-x                ; }


#header .centrage  li #contact {background : url(menu-bg-4.jpg) repeat-x                ; }

/* CONTENEUR GENERAL 
  *******************************************************/

#content {
text-align : left;
width : 817px ;
margin : 0 auto ;
padding : 20px 0 0 0; 

}

/* SIDE
  *******************************************************/

#side {
float : left ; 
width : 215px ;
padding :  0; 

 }


#side h2{
font-size : 0.8em;
margin : 0 0 10px 0 ; 
padding : 0 0 0 10px ;
color : #fff ;
height : 22px ; 
line-height : 22px ;   
 }
 
 
 #side h2#categories {
background : url(h2-1.jpg) no-repeat                ;
 
 }
 
  #side h2#articles {
background : url(h2-2.jpg) no-repeat                ;
  
 }
 

 
#side ul{
margin : 0 ; 
padding : 0 ;
background :  url(centre-side-bloc.jpg) repeat-y;
padding : 5px 10px 5px 15px ; 
list-style : none ; 

 }
 
#side li  {
padding : 0 0 0 20px ; 
margin :  5px 0 0 0 ;
background : url(side-li.jpg) left no-repeat



 }
 
#side li a {
text-decoration : none ; 
color : #4D4F50  
 }
 
#side li a:hover {
text-decoration : underline ; 
}
 
 
#side img {
border : 0;

 }

#side p {
margin : 5px 0 5px 0 ;
padding : 0 ; 
 }

 
#side .side-bloc {
background : url(top-side-bloc.jpg) no-repeat;

}

#side .bottom-side-bloc {
background : url(bottom-side-bloc.jpg) left top no-repeat;
height : 13px 
}


/* CONTENU
  *******************************************************/


#contenu {
float : left ; 
width : 592px ;
padding :   0;
background : url(top-contenu-bg.jpg) top no-repeat                ;
font-size : 115%;    
}


#bg-centre-contenu {
background : url(centre-contenu-bg.jpg) repeat-y                ; 
padding : 0 0 40px 0 
}

#bg-bottom-contenu {
position : relative ; 
height : 83px; 
background : url(bas-contenu-bg.jpg) no-repeat;  
}


#bg-bottom-contenu p{
position : absolute ; 
right : -6px ; 
top : 5px ; 
font-size : 80%; 
color : #fff ;
margin : 0;
padding : 0;
} 


#bg-bottom-contenu a{
text-decoration : none ; 
color : #fff ; 
} 

#contenu a{
text-decoration : none ;  
}

#contenu a:hover {
text-decoration : underline ;  
 }


#contenu p{
margin : 0; 
padding : 5px 20px ;  
}

#contenu h2 {
margin : 0; 
padding : 20px 0 10px  20px;
color : #669900   
}
Configuration: Windows XP
Safari 525.19

5 réponses

  1. Crisu
    Salut Rafale 69300,

    t'aider est une chose, le faire pour toi en est une autre ;)
    Ceci dit, généralement il est difficile de faire de la compatibilité entre IE & Firefox dans la même feuille de style.

    On fait plutot une feuille pour IE et une feuille pour FireFox avec une petite verif en début de page du genre :
    <LINK rel=STYLESHEET href="css/hp-firefox.css" type="text/css">
    <!--[if lte IE 7]>
    <LINK rel=STYLESHEET href="css/hp-ie.css" type="text/css">
    <![endif]-->

    A toi de jouer ;)
    1. rafale69300 Auteur
      J'avais bien penser à cette solution, mais le souci c'est que je ne sais pas ce qu'il faut modifier dans le css pour IE et pour mozilla
      1. Crisu
        Je pense que tu dois déjà pour tester, jouer avec ca :

        #contenu {
        float : left ;
        width : 592px ;
        padding : 0;
        background : url(top-contenu-bg.jpg) top no-repeat ;
        font-size : 115%;
        }

        Essai de mettre Float : right, voi comment ca réagi.

        Et a terme j'enlèverais float et mettrai "position : relative" avec des "left" et des "tops" propres a chaque feuille de style.
        3. bg62 Modérateur
          télécharge le plugin firebug pour firefox et ensuite IETester pour les versions de IE ....

          Discussions similaires

          compatibilité objectifs AF NIKKOR sur boitier numérique
          lilicoco

          5 réponses