Problème de compatibilité Mozilla & IE
rafale69300
Messages postés
93
Statut
Membre
-
bg62 Messages postés 26245 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 26245 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.
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
}
A voir également:
- Problème de compatibilité Mozilla & IE
- Compatibilite windows 11 - Guide
- Downloadhelper mozilla - Télécharger - Outils pour navigateurs
- Mozilla firefox - Télécharger - Navigateurs
- Ie tab - Télécharger - Outils pour navigateurs
- Mozilla thunderbird - Télécharger - Mail
5 réponses
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 ;)
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 ;)
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
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.
#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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question