Problème de compatibilité CSS avec IE
Dernière réponse : dans Programmation
Hello à tous alors voilà j'ai un problème de compatibilité avec mon CSS dans internet explorer se problème n'es bien evidement pas sur firefox. Je me suis renseigné sur différent forum pour voir les problème possible et j'ai vu que IE est une vrai {}@ (c'est pas nouveau) alors la question est voyez vous des solution à mon problème ? (css disponible à cette adresse : http://phpnet.org/panel_v3/style.css)
Merci de votre aide :-)
body{
background:#E7ECFF url(img/bodybg.gif) repeat;
color:#505050;
font:82% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
p{
line-height:20px;
margin:0 0 15px;
}
a{
color:#3E80B4;
font-weight:700;
text-decoration:none;
}
a:hover{
color:#d04a10;
}
hr{
height:1px;
margin:10px 0;
width:98%;
}
dt{
font-weight:700;
}
dd{
margin:1px 0 12px 15px;
}
#container{
background:#E7ECFF ;
margin:0 auto;
text-align:left;
width:952px;
}
#sitename{
background:url(img/leaves.jpg) top center no-repeat;
color:#ffffff;
font-weight:400;
height:100px;
margin:0 0px 4px 0;
text-align:center;
}
#sitename h1{
font-size:29px;
margin:0;
padding-top:20px;
}
#sitename span{
font-size:21px;
letter-spacing:-1px;
margin:0;
}
#nav{
background:url(img/greypx.gif) bottom left repeat-x;
float:left;
width:952px;
}
#nav ul{
list-style:none;
margin:0;
padding:0;
}
#nav a{
background:url(img/tabs.gif) no-repeat 100% 0;
color:grey;
display:block;
font-size:16px;
letter-spacing:-1px;
padding:7px 20px 4px 11px;
text-decoration:none;
}
#nav a:hover{
color:#505050;
}
#nav li{
background:url(img/tabs.gif) no-repeat 0 0;
float:left;
margin:0 4px 0 0;
padding:0 0 0 9px;
}
#nav #current{
background:url(img/tabs.gif) no-repeat 0 -41px;
}
#nav #current a{
background:url(img/tabs.gif) no-repeat 100% -41px;
color:#303030;
padding:7px 20px 5px 11px;
}
#wrap1{
background:#ffffff url(img/innerbg.gif) repeat-y;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
clear:both;
padding:0;
width:950px;
}
#wrap2{
background:url(img/header.jpg) top left no-repeat;
padding:10px;
width:930px;
}
#header{
height:30px;
position:relative;
width:930px;
}
#header h1{
float:left;
font-size:19px;
margin:0;
width:180px;
}
#topbox{
color:#808080;
margin:0 0 4px;
text-align:right;
}
#topbox a{
color:#3E80B4;
}
#topbox a:hover{
text-decoration:underline;
}
#leftside{
float:left;
margin:-20px 0 0;
width:210px;
}
#leftside h1{
font-size:19px;
font-weight:400;
}
#rightside{
float:right;
margin:40px 15px 20px 0;
width:75px;
}
#rightside h1{
font-size:19px;
font-weight:400;
margin:0 0 12px;
}
#rightside p{
font-size:13px;
margin:2px 0 12px 10px;
}
#rightside img{
border:1px solid #3E80B4;
margin:10px 0 5px 5px;
padding:2px;
}
#content{
margin:45px 40px 0 240px;
}
#contentalt{
margin:45px 15px 0 180px;
}
#content p,#contentalt p{
margin:8px 0 0 10px;
}
#content h1,#contentalt h1{
color:#505050;
font-size:27px;
font-weight:400;
margin:15px 0 10px;
padding:0;
}
#content h2,#contentalt h2{
color:#505050;
font-size:20px;
font-weight:400;
margin:20px 0 10px;
padding:0;
}
#footer{
clear:both;
color:#a0a0a0;
font-size:12px;
height:26px;
margin-top:20px;
padding:1px;
text-align:right;
width:930px;
}
#footer a{
color:#a0a0a0;
font-weight:400;
}
#footer a:hover{
color:#a0a0a0;
text-decoration:underline;
}
.menublock{
margin-bottom:10px;
}
.nav{
color:#FFFFFF;
display:block;
font-size:15px;
font-weight:700;
margin-bottom:0;
padding:0px 0px 0px 5px;
position:relative;
text-decoration:none;
width:170px;
}
.nav:hover{
color:#505050;
padding:0px 0px 0px 5px;
}
.sub{
font-size:12px;
margin-left:20px;
padding:1px 1px 1px 6px;
width:105px;
}
.sub:hover{
border:1px solid #3E80B4;
color:#505050;
padding:0 0 0 5px;
}
.intro{
font-weight:700;
}
.active{
border:1px solid #3E80B4;
padding:1px 1px 1px 9px;
}
.box{
background:#f8f8f8 url(img/boxbg.gif) top left repeat-y;
border:1px solid #3E80B4;
color:#505050;
margin:15px auto;
padding:10px 10px 10px 20px;
width:75%;
}
.photo{
margin:5px auto 15px;
padding:5px;
}
.smallcaps{
font-variant:small-caps;
}
.mini{
color:#a0a0a0;
font-size:10px;
font-weight:400;
line-height:16px;
margin:20px 0 10px 8px;
}
.small{
font-size:11px;
}
.large{
font-size:19px;
}
.soft{
color:#FFFFFF;
}
.normal{
font-weight:400;
}
.sharp{
color:#101010;
}
.center{
text-align:center;
}
.hide{
display:none;
}
Merci de votre aide :-)
Citation :
body{
background:#E7ECFF url(img/bodybg.gif) repeat;
color:#505050;
font:82% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
p{
line-height:20px;
margin:0 0 15px;
}
a{
color:#3E80B4;
font-weight:700;
text-decoration:none;
}
a:hover{
color:#d04a10;
}
hr{
height:1px;
margin:10px 0;
width:98%;
}
dt{
font-weight:700;
}
dd{
margin:1px 0 12px 15px;
}
#container{
background:#E7ECFF ;
margin:0 auto;
text-align:left;
width:952px;
}
#sitename{
background:url(img/leaves.jpg) top center no-repeat;
color:#ffffff;
font-weight:400;
height:100px;
margin:0 0px 4px 0;
text-align:center;
}
#sitename h1{
font-size:29px;
margin:0;
padding-top:20px;
}
#sitename span{
font-size:21px;
letter-spacing:-1px;
margin:0;
}
#nav{
background:url(img/greypx.gif) bottom left repeat-x;
float:left;
width:952px;
}
#nav ul{
list-style:none;
margin:0;
padding:0;
}
#nav a{
background:url(img/tabs.gif) no-repeat 100% 0;
color:grey;
display:block;
font-size:16px;
letter-spacing:-1px;
padding:7px 20px 4px 11px;
text-decoration:none;
}
#nav a:hover{
color:#505050;
}
#nav li{
background:url(img/tabs.gif) no-repeat 0 0;
float:left;
margin:0 4px 0 0;
padding:0 0 0 9px;
}
#nav #current{
background:url(img/tabs.gif) no-repeat 0 -41px;
}
#nav #current a{
background:url(img/tabs.gif) no-repeat 100% -41px;
color:#303030;
padding:7px 20px 5px 11px;
}
#wrap1{
background:#ffffff url(img/innerbg.gif) repeat-y;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
clear:both;
padding:0;
width:950px;
}
#wrap2{
background:url(img/header.jpg) top left no-repeat;
padding:10px;
width:930px;
}
#header{
height:30px;
position:relative;
width:930px;
}
#header h1{
float:left;
font-size:19px;
margin:0;
width:180px;
}
#topbox{
color:#808080;
margin:0 0 4px;
text-align:right;
}
#topbox a{
color:#3E80B4;
}
#topbox a:hover{
text-decoration:underline;
}
#leftside{
float:left;
margin:-20px 0 0;
width:210px;
}
#leftside h1{
font-size:19px;
font-weight:400;
}
#rightside{
float:right;
margin:40px 15px 20px 0;
width:75px;
}
#rightside h1{
font-size:19px;
font-weight:400;
margin:0 0 12px;
}
#rightside p{
font-size:13px;
margin:2px 0 12px 10px;
}
#rightside img{
border:1px solid #3E80B4;
margin:10px 0 5px 5px;
padding:2px;
}
#content{
margin:45px 40px 0 240px;
}
#contentalt{
margin:45px 15px 0 180px;
}
#content p,#contentalt p{
margin:8px 0 0 10px;
}
#content h1,#contentalt h1{
color:#505050;
font-size:27px;
font-weight:400;
margin:15px 0 10px;
padding:0;
}
#content h2,#contentalt h2{
color:#505050;
font-size:20px;
font-weight:400;
margin:20px 0 10px;
padding:0;
}
#footer{
clear:both;
color:#a0a0a0;
font-size:12px;
height:26px;
margin-top:20px;
padding:1px;
text-align:right;
width:930px;
}
#footer a{
color:#a0a0a0;
font-weight:400;
}
#footer a:hover{
color:#a0a0a0;
text-decoration:underline;
}
.menublock{
margin-bottom:10px;
}
.nav{
color:#FFFFFF;
display:block;
font-size:15px;
font-weight:700;
margin-bottom:0;
padding:0px 0px 0px 5px;
position:relative;
text-decoration:none;
width:170px;
}
.nav:hover{
color:#505050;
padding:0px 0px 0px 5px;
}
.sub{
font-size:12px;
margin-left:20px;
padding:1px 1px 1px 6px;
width:105px;
}
.sub:hover{
border:1px solid #3E80B4;
color:#505050;
padding:0 0 0 5px;
}
.intro{
font-weight:700;
}
.active{
border:1px solid #3E80B4;
padding:1px 1px 1px 9px;
}
.box{
background:#f8f8f8 url(img/boxbg.gif) top left repeat-y;
border:1px solid #3E80B4;
color:#505050;
margin:15px auto;
padding:10px 10px 10px 20px;
width:75%;
}
.photo{
margin:5px auto 15px;
padding:5px;
}
.smallcaps{
font-variant:small-caps;
}
.mini{
color:#a0a0a0;
font-size:10px;
font-weight:400;
line-height:16px;
margin:20px 0 10px 8px;
}
.small{
font-size:11px;
}
.large{
font-size:19px;
}
.soft{
color:#FFFFFF;
}
.normal{
font-weight:400;
}
.sharp{
color:#101010;
}
.center{
text-align:center;
}
.hide{
display:none;
}
Autres pages sur : probleme compatibilite css
Lassé par la pub ? Créez un compte
En fait j'ai fait une image sous photoshop et ensuite grace au css j'ai inclu du texte sur ces images (le but du css) tout va bien sous firefox mais sous IE les images sont agrandi le texte est au même endroit mais les images partent n'importe où.
En regardant sur des sites j'ai repéré que les erreurs viennent surement des width ; padding ; border ; margin que IE soustrait au lieu d'additionné comme tout navigateur alors il existe des solutions mais je les trouvent pas :-(
En regardant sur des sites j'ai repéré que les erreurs viennent surement des width ; padding ; border ; margin que IE soustrait au lieu d'additionné comme tout navigateur alors il existe des solutions mais je les trouvent pas :-(
Petite astuce qui m'aide régulièrement pour la compatibilité IE et FF.
!important; à placer dans ton css pour obligé IE à respecter la propriété en question. Pour plus d'aide : http://www.babylon-design.com/site/index.php/2004/12/13...
!important; à placer dans ton css pour obligé IE à respecter la propriété en question. Pour plus d'aide : http://www.babylon-design.com/site/index.php/2004/12/13...
Je vais me répéter ^^
La librairire gd2 , qui normalement est déjà présente sur ton serveur apache/php ( si bien sur tu fais un site en php ) , doit etre activé dans le php.ini (par défault il se trouve dans un commentaire ) .
Cette librairie te permet de faire pas mal de traitement sur les images et te permets également d'insérer du texte sur une image en spécifiant la position ,la taille etc ... Ce n'est la qu'une infime partie des possibilités de cette librairie.
Si ma mémoire ne me fait pas défaut , un tuto est disponible sur le site du zero .
Un exemple parle plus qu'une explication parfois
![]()
edit: Arf , j'uploaderais ce soir en revenant du boulot l'image générée avec gd2 , il semblerait que mon hebergement à pris fin xD
La librairire gd2 , qui normalement est déjà présente sur ton serveur apache/php ( si bien sur tu fais un site en php ) , doit etre activé dans le php.ini (par défault il se trouve dans un commentaire ) .
Cette librairie te permet de faire pas mal de traitement sur les images et te permets également d'insérer du texte sur une image en spécifiant la position ,la taille etc ... Ce n'est la qu'une infime partie des possibilités de cette librairie.
Si ma mémoire ne me fait pas défaut , un tuto est disponible sur le site du zero .
Un exemple parle plus qu'une explication parfois

edit: Arf , j'uploaderais ce soir en revenant du boulot l'image générée avec gd2 , il semblerait que mon hebergement à pris fin xD
Lassé par la pub ? Créez un compte
- Contenus similaires :
Tags :