Problème de compatibilité Mozilla & IE

rafale69300 Messages postés 93 Statut Membre -  
bg62 Messages postés 23433 Date d'inscription   Statut Modérateur Dernière intervention   -
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 Messages postés 89 Statut Membre 40
     
    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 ;)
    0
  2. rafale69300 Messages postés 93 Statut Membre 2
     
    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
    0
  3. Crisu Messages postés 89 Statut Membre 40
     
    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.
    0
  4. rafale69300 Messages postés 93 Statut Membre 2
     
    Merci Crisu je vais essayer !!
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. bg62 Messages postés 23433 Date d'inscription   Statut Modérateur Dernière intervention   2 435
     
    télécharge le plugin firebug pour firefox et ensuite IETester pour les versions de IE ....
    0

Discussions similaires

compatibilité objectifs AF NIKKOR sur boitier numérique
lilicoco -
The Braveheart -

5 réponses