18041 sujets

Questions générales et questions de débutants

Problème affichage Internet explorer

Bonjour,

Je suis débutant dans la création de site web. Je viens de me lancer dans la création d'un site pour ma société avec le logiciel dramweaver cs6. Je viens de le terminer et je m'aperçois que l'affichage sur internet explorer n'est pas bon.

J'utilise trois css (car trois fonds de pages différents sur le site) et des pages html. Dans les html, j'ai des div PA et des tableaux.

Quand je visualise mes pages, elles sont parfaites sur chrome et sur mozilla, par contre sur internet explorer 8, elle n'affiche pas le fond, les images sont décalés, le contour est bleu autour du tableau... Que dois-je faire pour résoudre ce problème? J'ai lu dans la partie apprendre les articles liés à ce problème mais je n'arrive pas à le résoudre.

Ci joint imprimés écran et exemple de code d'une page :

Voici un css :
@charset "utf-8";
/* CSS Document */

#page {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#contenu {
margin: 1em;
color: #FFF;
position: relative;
height: 184px;
right: -4px;
}
html {
background: url(images/fondgestionaccueil.jpg) no-repeat;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
right: 0px;
position: relative;

}
#contenu #apDiv13 p {
color: #333;
}



et html :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="fondgestionpatrimoine.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position: relative;
width: 200px;
height: 73px;
z-index: 1;
}
#apDiv2 {
position: absolute;
width: 200px;
height: 92px;
z-index: 1;
right: -577px;
top: -17px;
}
#apDiv4 {
position: relative;
width: 200px;
height: 115px;
z-index: 2;
left: 2px;
top: 0px;
}
#apDiv5 {
position: relative;
width: 200px;
height: 115px;
z-index: 3;
top: 290px;
right: -2px;
}
#apDiv6 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
right: -245px;
}
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
right: -491px;
}
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 3;
right: -736px;
}
#apDiv9 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 13px;
top: 10px;
}
#apDiv10 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
top: 10px;
left: 258px;
}
#apDiv11 {
position: absolute;
width: 200px;
height: 115px;
z-index: 6;
top: 10px;
left: 504px;
}
#apDiv12 {
position: absolute;
width: 200px;
height: 115px;
z-index: 7;
top: 10px;
left: 749px;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/ACCUEIL-ROUGE.png','images/PARTICULIERS-ROUGE.png','images/DIRIGEANT-ROUGE.png','images/CONTACT-ROUGE.png','images/LE-CABINET-ROUGE.png','images/INDEPENDANCE COULEUR.jpg','images/FORCE COULEUR.jpg','images/EXPERTISE COULEUR.jpg','images/SERVICE COULEUR.jpg')">
<div id="page">
<div id="contenu">
<div id="apDiv1">
<div id="apDiv2"><img src="images/enadré-haut-de-page.png" width="390" height="98" /></div>
<a href="index.html"><img src="images/LOGO 2.png" width="359" height="63" /></a></div>
<table width="970" border="0">
<tr>
<td height="53"><img src="images/BARRE-GAUCHE.png" width="350" height="31" /><a href="accueilgestion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/ACCUEIL-ROUGE.png',1)"><img src="images/ACCUEIL-GRIS.png" width="101" height="31" id="Image19"></a><a href="lecabinet1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/LE-CABINET-ROUGE.png',1)"><img src="images/LE-CABINET-ROUGE.png" width="102" height="31" id="Image"></a><a href="particulier1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/PARTICULIERS-ROUGE.png',1)"><img src="images/PARTICULIERS-gris.png" width="102" height="31" id="Image6" /></a><a href="entreprise1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/ENTREPRISE-ROUGE.png',0)"><img src="images/ENTREPRISE-GRIS.png" width="102" height="31" id="Image7" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/DIRIGEANT-ROUGE.png',1)"><img src="images/DIRIGEANT-GRIS.png" width="102" height="31" id="Image8" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/CONTACT-ROUGE.png',1)"><img src="images/CONTACT-GRIS.png" width="101" height="31" id="Image9" /></a></td>
</tr>
</table>
<div id="apDiv3">
<div id="apDiv4"><img src="images/ENCART-LE-CABINET.png" width="960" height="389" /></div>
<div id="apDiv5">
<div id="apDiv6"><img src="images/encadré-2.png" width="224" height="230"></div>
<div id="apDiv7"><img src="images/encadré-3.png" width="223" height="232"></div>
<div id="apDiv8"><img src="images/encadré-4.png" width="223" height="232"></div>
<div id="apDiv9"><a href="lecabinet2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','images/INDEPENDANCE COULEUR.jpg',1)"><img src="images/INDEPENDANCE N&B.jpg" width="197" height="131" id="Image15"></a></div>
<div id="apDiv10"><a href="lecabinet3.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','images/FORCE COULEUR.jpg',1)"><img src="images/FORCE N&B.jpg" width="197" height="131" id="Image16"></a></div>
<div id="apDiv11"><a href="lecabinet4.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','images/EXPERTISE COULEUR.jpg',1)"><img src="images/EXPERTISE N&B.jpg" width="197" height="131" id="Image17"></a></div>
<div id="apDiv12"><a href="lecabinet5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','images/SERVICE COULEUR.jpg',1)"><img src="images/SERVICE N&B.jpg" width="197" height="131" id="Image18"></a></div>
<img src="images/encadré-1.png" width="223" height="232"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table width="960" border="0">
<tr>
<td><div align="center"><img src="images/S&C-et-Tout-droits-reserves.png" alt="" width="298" height="16"><img src="images/INFO-LEGALES.png" alt="" width="123" height="16"><img src="images/LIEN-VIADEO.png" alt="" width="25" height="19"><img src="images/LIEN-FACEBOOK.png" alt="" width="19" height="19"><img src="images/LIEN-TWITTER.png" alt="" width="20" height="18"><img src="images/LIEN-CONTACT.png" alt="" width="45" height="15"></div></td>
</tr>
</table>
<p> </p>

</div>
</div>
</body>
<body>
</body>
</html>

Les imprimés écran :
http://cjoint.com/?CCulQi9KPkR
http://cjoint.com/?CCulS3Z9KOs

Merci pour votre aide.

R.D.[/i][/i][/i][/i][/i]
Bonjour,

C'est normal que ton site bug avec IE!
Tu dois savoir que ce dernier est pratiquement tout le temps à l'ouest... Smiley biggol

Du coup tu dois créer un css dédié à IE du genre style-IE.css dans lequel tu débug tout ça et que seul IE prendra en compte grâce à un commentaire conditionnel placé dans ton <head/>
du genre [if IE ...]
--> un lien utile pour toi je pense:
http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html

J'espère t'avoir aidé.

@ plus
Bonjour,

C'est normal que ton site bug avec IE!
Tu dois savoir que ce dernier est pratiquement tout le temps à l'ouest...

Pas sûr, si tu as des soucis avec IE c'est que ton code est mal construit. FF est très souple, IE très stricte et t'aide a voir et comprendre tes erreurs, c'est donc un bon test pour ton code HTML.

Ta besoins de créer une feuille CSS juste pour IE, utilise les commentaires conditionnels pour régler certains détails de positionnement et balises en HTML.
En gros si ton code est valide, il passera bien dans IE et à fortiori dans les autres navigateurs...

A+
Modifié par heatseeker (22 Mar 2013 - 08:25)
Merci pour vos réponses qui m'ont bien aidés.

J'ai toujours un problème sur IE avec mon image de fond qui ne veut pas s'afficher, alors qu'avec une couleur de fond aucun souci. Que dois je faire pour pouvoir l'afficher?
heatseeker a écrit :

Pas sûr, si tu as des soucis avec IE c'est que ton code est mal construit. FF est très souple, IE très stricte et t'aide a voir et comprendre tes erreurs, c'est donc un bon test pour ton code HTML.



C'est complètement faux Smiley sweatdrop . Simplement IE est à l'ouest oui, toujours le dernier à être compatible avec les dernières technos et le dernier dans ton cas à comprendre les nouveautés CSS... On appelle pas ça le "debogage" pour rien in Smiley cligne , c'est bien qu'il y a BUG quelque part, chez IE en l'occurrence.

J'insiste sur le fait que ton code a parfois beau être bien fait et valide W3C, beh IE fait son casse couille ^^. Après bien sûr qu'il peut y avoir des erreurs de code, mais ce n'est pas le propos.
Salut,

D'accord avec heetseeker concernant le CSS. Pour ce qui est du support d'IE, je préfère éviter le sujet !

Le CSS que tu attribues actuellement à la balise html, tu devrais l'attribuer à la balise body.

Fais attention : "background-size:cover" n'est supporté qu'à partir d'IE9.
Modifié par petibato (06 Sep 2013 - 16:52)
Sujet clos
Aller à