Votre question

Mon site incompatible avec IE

Tags :
  • Internet Explorer
  • Programmation
Dernière réponse : dans Programmation
6 Juillet 2007 16:29:22

Bonjour,
Il y a quelque temps j'ai crée un site web (mon premier) et sous FireFox tout est presque parfait, mes cadres s'affichent très bien pas de soucis majeurs, mais lorsque j'affiche mon site sur Internet Explorer le site est entièrement décalé, tout le corps se place sous les bords... alors j'ai essayer d'y remédier mais je ne trouve pas d'où ça peut venir, et comme la majeur partie des internautes sons sous IE ça m'embête beaucoup...
Donc mon site c'est : http://wiinga.funpic.org

Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>.:: WiinGa ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>


<div id="border_left">

</div>

<div id="border_right">

</div>


<div id="header">

<div id="header_titre">

</div>

<div id="header_pub">
<SCRIPT TYPE="text/javascript" language="javascript" SRC="http://ads.allotraffic.com/clicstandart?id=6194"></SCRIPT>
</div>

<div id="header_elements">

<div id="header_design_blue">

</div>

<div id="header_design_rose">

</div>

</div>

</div>

<div id="under_header">

<a class="element_menu_left" href="#">Accueil</a>
<a class="element_menu_left" href="#">Dossiers</a>
<a class="element_menu_left" href="#">Mosts</a>
<a class="element_menu_right" href="#">Connection</a>
<a class="element_menu_right" href="#">FAQ</a>

</div>

<div id="corps">

<div id="corps_gauche">

<div class="corps_news">

<div class="block_titre">
Accueil
</div>

<div class="block_espace">
<p>Il suffit de modifier la marge "a gauche" du corps. C'est une marge exterieure, donc un margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne passe plus sous le menu (donc une valeur superieure a la largeur du menu). Ici par exemple, on va mettre une valeur de 140px. Comme par magie, vous allez voir, le corps sera correctement place !<p>

<p>Ne nous arretons pas en si bon chemin :) 
On va rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop "colle" au corps :
margin-bottom:20px;<p>

<p>On va aussi mettre un petit padding (marge interieure) sur tous les cotes afin que le texte ne colle pas trop avec les bords du corps :
padding:5px;<p>

<p>On va aussi mettre une couleur de fond, une petite image de fond qui se repete horizontalement, une bordure... Bref, tout ca c'est de la deco ;) <p>
</div>

</div>

<div class="corps_news">

<div class="block_titre">
Accueil
</div>

<div class="block_espace">
<p>Il suffit de modifier la marge "a gauche" du corps. C'est une marge exterieure, donc un margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne passe plus sous le menu (donc une valeur superieure a la largeur du menu). Ici par exemple, on va mettre une valeur de 140px. Comme par magie, vous allez voir, le corps sera correctement place !<p>

<p>Ne nous arretons pas en si bon chemin :) 
On va rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop "colle" au corps :
margin-bottom:20px;<p>

<p>On va aussi mettre un petit padding (marge interieure) sur tous les cotes afin que le texte ne colle pas trop avec les bords du corps :
padding:5px;<p>

<p>On va aussi mettre une couleur de fond, une petite image de fond qui se repete horizontalement, une bordure... Bref, tout ca c'est de la deco ;) <p>
</div>

</div>

</div>

<div id="corps_droit">

<div class="corps_lasts">

<div class="block_titre">
Lasts news
</div>

<div class="lasts_espace">

<ul>
<li><a href="#">Version finale de Wiinga</a></li>
<li><a href="#">Nouveau h%u0439b%u0439rgeur</a></li>
<li><a href="#">Nouvelles venues</a></li>
<li><a href="#">Decoupage et codage</a></li>
<li><a href="#">Tout sur l'HTML</a></li>
<li><a href="#">Mise en page</a></li>
<li><a href="#">Design CSS et bien d'autres</a></li>
<li><a href="#">Cr%u0439ation Site</a></li>
</ul>

</div>

</div>

<div class="corps_lasts">

<div class="block_titre">
Lasts scores
</div>

<div class="lasts_espace">

<ul>
<li><a href="#">Version finale de Wiinga</a></li>
<li><a href="#">Nouveau h%u0439b%u0439rgeur</a></li>
<li><a href="#">Nouvelles venues</a></li>
<li><a href="#">Decoupage et codage</a></li>
<li><a href="#">Tout sur l'HTML</a></li>
<li><a href="#">Mise en page</a></li>
<li><a href="#">Design CSS et bien d'autres</a></li>
<li><a href="#">Cr%u0439ation Site</a></li>
</ul>

</div>

</div>

<div class="corps_lasts">

<div class="block_titre">
Pub
</div>

<div class="lasts_espace_pub">

<center><SCRIPT TYPE="text/javascript" language="javascript" SRC="http://ads.allotraffic.com/clicskycraper?id=6194"></SCRIPT></center>

</div>

</div>

</div>

</div>

<div id="foot">
<p>Wiinga.com est un site de Tazel Network
<b>Copyright © 2006 - 2007 Tazel Group</b><p>
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2179004-1";
urchinTracker();
</script>

</body>
</html>[/spoiler]

Code CSS:

Spoiler
body
{
margin-right: 24px;
width: 900px;
margin: auto;
background-color: white;
}


#border_left
{
float: left;
width: 24px;
height: 1096px;
background-image: url("images/bord_left.png");
background-repeat: repeat-y;
}


#border_right
{
float: right;
width: 24px;
height: 1096px;
background-image: url("images/bord_right.png");
background-repeat: repeat-y;
}


#header
{
width: 100%;
height: 150px;
background-image: url("images/header_background2.png"); /* bleu: background1 rose: background2 */
background-repeat: repeat-x;
}


#header_titre
{
float: left;
margin-left: 20px;
width: 300px;
height: 150px;
background-image: url("images/header_titre.gif");
background-repeat: no-repeat;
}


#header_pub
{
padding-top: 42px;
}


#header_design_blue
{
float: right;
margin-right: 10px;
margin-top: 18px;
width: 15px;
height: 15px;
border: 1px solid black;
background-color: #41a8ff;
}


#header_design_rose
{
float: right;
margin-right: 5px;
margin-top: 18px;
width: 15px;
height: 15px;
border: 1px solid black;
background-color: #c755a8;
}


#under_header
{
width: 99%;
height: 35px;
background-image: url("images/under_header2.png"); /* bleu: under_header1 rose: under_header2 */
background-repeat: repeat-x;
border: 1px solid white;
}


.element_menu_left
{
display:block;
float:left;
width:10%;
height:17.5px;
border:none;
margin-top: 5px;
text-align:center;
font-size: 12px;
font-family: "Time New Roman", Arial, Verdana, serif;
font-weight: bold;
color: gray;
text-decoration: none;
background-image: url("images/under_header_separate.gif");
background-position: right;
background-repeat: repeat-y;
}


.element_menu_right
{
display:block;
float:right;
width:10%;
height:17.5px;
border:none;
margin-top: 5px;
text-align:center;
font-size: 12px;
font-family: "Time New Roman", Arial, Verdana, serif;
font-weight: bold;
color: gray;
text-decoration: none;
background-image: url("images/under_header_separate.gif");
background-position: left;
background-repeat: repeat-y;
}


#corps
{
width: 900px;
}


#corps_droit
{
float: right;
margin-right: 13px;
margin-top: 10px;
width: 250px;
}


.corps_lasts
{
float: right;
width: 100%;
margin-bottom: 10px;
border: 1px solid #e9e9e9;
background-image: url("images/corps_lasts.png");
background-repeat: repeat-y;
}


.block_titre
{
height: 20px;
padding: 1px;
background-color: #f3f3f3; /* gris: f3f3f3 rose: ffe9fe bleu: e9eaff */
text-align: center;
font-size: 13px;
font-family: "Time New Roman", Arial, Verdana, serif;
font-weight: bold;
color: gray;
}


.lasts_espace ul
{
list-style-type: square;
}


.lasts_espace a
{
height: 18px;
margin-left: 5px;
margin-bottom: 10px;
font-size: 13px;
font-family: "Time New Roman", Arial, Verdana, serif;
color: #154975;
text-decoration: none;
}


.lasts_espace_pub
{
padding: 10px;
background-color: black;
}


#corps_gauche
{
float: left;
margin-left: 13px;
margin-top: 10px;
width: 555px;
}


.corps_news
{
margin-bottom: 10px;
float: left;
width: 100%;
border: 1px solid #e9e9e9;
background-image: url("images/corps_lasts.png");
background-repeat: repeat-y;
}


.block_espace
{
padding: 5px;
margin-left: 5px;
margin-bottom: 10px;
font-size: 13px;
font-family: "Time New Roman", Arial, Verdana, serif;
color: black;
text-decoration: none;
}


#foot
{

float: left;
width: 852px;
height: 100px;
background-image: url("images/foot2.png"); /* bleu: foot1 rose: foot2 */
background-repeat: repeat-x;
background-position: bottom;
}


#foot p
{
margin-top: 60px;
text-align: center;
font-size: 12px;
font-family: "Time New Roman", Arial, Verdana, serif;
color: white;
}

Voila :) 

Autres pages sur : site incompatible

6 Juillet 2007 16:33:39

je suis sous linux donc j'ai pas ie

sinon tu n'as pas éseillé de refaire ton code pour IE?
6 Juillet 2007 17:36:11

utilise des hacks IE ( recherche dans google)

en fait ca consiste a garder ton css actuel et a en faire un spécialement pour IE ...mais bon logiquement si tu fais un code propre clair et en utilisant les bonnes propriétés css tu ne drvais pas avoir trop de problemes .

Et la vu ce que je vois c'est un probleme de blocks essaie de reorganiser tes div ...
Contenus similaires
6 Juillet 2007 19:11:40

Oki, je vais déjà commencer par recoder entièrement et voir ce que ça va donner...
6 Juillet 2007 19:15:16

c un kit graphique ca non ?

verifie les div , j'ai l'impression qu'ils sont mal fermés il doit manquer un </div> ou il doit y en avoir un en trop ...

c toi qui a codé ?
6 Juillet 2007 20:12:33

non non j'ai tout crée moi même
le code et les images :) 
Je vais vérifier les <div> merci :) 
PS : je suis en train de tout reencoder donc si le problème persiste je repost mon nouveau code :) 
7 Juillet 2007 01:02:50

ok pas de probleme . mais je jeterai un oeil sur le code demain parce que la y'a un truc qui cloche , je le testerai. mais je suis pratiquement sur a 100% que ce sont des div mal fermés ou un probleme de tailles et de marges ... c pas bien compliqué de toute facon ^^
7 Juillet 2007 01:34:55

Je jeter vite un petit coup d'oeil comme ca, déjà enlève les majuscule de SCRIPT

Je comprend pas trop le principe de div id="border-left" et "border-right"

Si ton body est en width 900px avec une magin: auto; tu as pas besoin d'autre marge...

ca pourra peut être t'aider http://validator.w3.org/check?uri=http%3A%2F%2Fwiinga.w...
7 Juillet 2007 10:49:01

Merci a vous deux :) 
Donc j'ai recode l'ensemble du site donc maintenant pas trop de soucis avec IE (quelques différences néanmoins par rapport a FF)
Par contre j'ai enlevé les bords qui projettent une ombre et je voudrais les remettre mais je ne sais pas trop comment.

PS:
*allstar27: en ce qui concerne le "SCRIPT" c'est un script donné par défaut par allotraffic pour les pubs. Ensuite les "border-left et right" ce sont les bords qui projettent une ombre et en se qui concerne la marge effectivement en re-encodant le code CSS j'ai trouvé plusieurs failles de ce genre ^^
Et merci beaucoup pour ton lien :D 

*killive: je penche aussi pour la taille ou la marge :S

Bon je vous donne mes nouveaux codes cette fois ci pas trop de problèmes entre les 2 navigateurs, mais plus de bords ce qui donne un effet pas très agréable, donc si quelqu'un a une idée comment les remettre... :) 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>.:: WiinGa ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>


<div id="header">

<div id="header_titre">

</div>

<div id="header_pub">

<SCRIPT TYPE="text/javascript" language="javascript" SRC="http://ads.allotraffic.com/clicstandart?id=6194"></SCRIPT>

</div>

</div>


<div id="under_header">

<a class="element_menu_left" href="#">Accueil</a>
<a class="element_menu_left" href="#">Dossiers</a>
<a class="element_menu_left" href="#">Mosts</a>
<a class="element_menu_right" href="#">Connection</a>
<a class="element_menu_right" href="#">FAQ</a>

</div>


<div id="corps">

<div id="corps_gauche">

<div class="block_news">

<div class="news_titre">
NEWS
</div>

<div class="news_espace">

<p>Il suffit de modifier la marge "a gauche" du corps. C'est une marge exterieure, donc un margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne passe plus sous le menu
(donc une valeur superieure a la largeur du menu). Ici par exemple, on va mettre une valeur de 140px. Comme par magie,
vous allez voir, le corps sera correctement place !<p>

<p>Ne nous arretons pas en si bon chemin :) 
On va rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop "colle" au corps :
margin-bottom:20px;<p>

<p>On va aussi mettre un petit padding (marge interieure) sur tous les cotes afin que le texte ne colle pas trop avec les
bords du corps : padding:5px;<p>

<p>On va aussi mettre une couleur de fond, une petite image de fond qui se repete horizontalement, une bordure...
Bref, tout ca c'est de la deco ;) <p>

</div>

</div>

<div class="block_news">

<div class="news_titre">
NEWS
</div>

<div class="news_espace">

<p>Il suffit de modifier la marge "a gauche" du corps. C'est une marge exterieure, donc un margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne passe plus sous le menu
(donc une valeur superieure a la largeur du menu). Ici par exemple, on va mettre une valeur de 140px. Comme par magie,
vous allez voir, le corps sera correctement place !<p>

<p>Ne nous arretons pas en si bon chemin :) 
On va rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop "colle" au corps :
margin-bottom:20px;<p>

<p>On va aussi mettre un petit padding (marge interieure) sur tous les cotes afin que le texte ne colle pas trop avec les
bords du corps : padding:5px;<p>

<p>On va aussi mettre une couleur de fond, une petite image de fond qui se repete horizontalement, une bordure...
Bref, tout ca c'est de la deco ;) <p>

</div>

</div>

</div>

<div id="corps_droit">

<div class="block_addons">

<div class="addons_titre">
Lasts news
</div>

<div class="addons_espace">

<ul>
<li><a href="#">Version finale de Wiinga</a></li>
<li><a href="#">Nouveau hйbйrgeur</a></li>
<li><a href="#">Nouvelles venues</a></li>
<li><a href="#">Decoupage et codage</a></li>
<li><a href="#">Tout sur l'HTML</a></li>
<li><a href="#">Mise en page</a></li>
<li><a href="#">Design CSS et bien d'autres</a></li>
<li><a href="#">Crйation Site</a></li>
</ul>

</div>

</div>

<div class="block_addons">

<div class="addons_titre">
Lasts downloads
</div>

<div class="addons_espace">

<ul>
<li><a href="#">Version finale de Wiinga</a></li>
<li><a href="#">Nouveau hйbйrgeur</a></li>
<li><a href="#">Nouvelles venues</a></li>
<li><a href="#">Decoupage et codage</a></li>
<li><a href="#">Tout sur l'HTML</a></li>
<li><a href="#">Mise en page</a></li>
<li><a href="#">Design CSS et bien d'autres</a></li>
<li><a href="#">Crйation Site</a></li>
</ul>

</div>

</div>

<div class="block_addons">

<div class="addons_titre">
Pub
</div>

<div class="addons_espace_pub">

<center><SCRIPT TYPE="text/javascript" language="javascript"
SRC="http://ads.allotraffic.com/clicskycraper?id=6194"></SCRIPT><center>

</div>

</div>

</div>

</div>

<div id="footer">

<p>Wiinga.com est un site de Tazel Network <b>Copyright © 2006 - 2007 Tazel Group</b><p>

</div>


</body>
</html>

CSS

body
{
width: 900px;
margin: auto;
background-color: white;
}


/*BANNIERE*/
#header
{
float: none;
width: 100%;
height: 150px;

background-image: url("images/header_background1.png");
background-repeat: repeat-x;
}


#header_titre
{
float: left;
width: 200px;
height: 150px;

background-image: url("images/header_titre.gif");
background-repeat: no-repeat;
}


#header_pub
{
float: left;
width: 468px;
height: 60px;
margin-top: 45px;
}


/*MENU UNDER HEADER*/
#under_header
{
float: none;
width: 100%;
height: 35px;

background-image: url("images/under_header1.png");
background-repeat: repeat-x;
}


.element_menu_left
{
display:block;
float:left;
width:10%;
height:18px;
margin-top: 5px;

text-align:center;
font-size: 12px;
font-family: Arial, serif;
font-weight: bold;
color: gray;
text-decoration: none;

background-image: url("images/under_header_separate.gif");
background-position: right;
background-repeat: repeat-y;
}


.element_menu_right
{
display:block;
float:right;
width:10%;
height:18px;
margin-top: 5px;

text-align:center;
font-size: 12px;
font-family: Arial, serif;
font-weight: bold;
color: gray;
text-decoration: none;

background-image: url("images/under_header_separate.gif");
background-position: left;
background-repeat: repeat-y;
}


/*CORPS*/
#corps
{
float: none;
width: 100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
}


#corps_gauche
{
float: left;
width: 60%;
margin-left: 10px;
margin-top: 10px;
}


#corps_droit
{
float: right;
width: 33%;
margin-right: 10px;
margin-top: 10px;
}


/*CORPS GAUCHE*/
.block_news
{
float: left;
width: 100%;
margin-bottom: 10px;

border: 1px solid #e9e9e9;
}


.news_titre
{
width: 100%;
height: 20px;

text-align: center;
font-size: 13px;
font-family: Arial, serif;
font-weight: bold;
color: gray;

background-color: #f3f3f3; /* gris: f3f3f3 rose: ffe9fe bleu: e9eaff */
}


.news_espace
{
padding: 5px;

font-size: 13px;
font-family: Arial, serif;
color: black;
text-decoration: none;
}


/*CORPS DROIT*/
.block_addons
{
float: right;
width: 100%;
margin-bottom: 10px;

border: 1px solid #e9e9e9;
}


.addons_titre
{
width: 100%;
height: 20px;

text-align: center;
font-size: 13px;
font-family: Arial, serif;
font-weight: bold;
color: gray;

background-color: #f3f3f3; /* gris: f3f3f3 rose: ffe9fe bleu: e9eaff */
}


.addons_espace
{
padding: 5px;
}


.addons_espace a
{
height: 18px;
margin-bottom: 10px;
padding: 5px;

font-size: 13px;
font-family: Arial, serif;
color: #154975;
text-decoration: none;
}

.addons_espace ul
{
list-style-type: square;
}


.addons_espace_pub
{
padding: 5px;
background-color: black;
}


/*FOOTER*/
#footer
{
float: left;
width: 100%;
height: 100px;
margin-top: 20px;

background-image: url("images/foot1.png");
background-repeat: repeat-x;
}


#footer p
{
margin-top: 60px;

text-align: center;
font-size: 13px;
font-family: Arial, serif;
color: white;
}

Merci
7 Juillet 2007 13:13:16

tu mets toujours des div partout c'est pas très bon ...

pour alleger ton code par exemple pour tes titres tu fais des span et tu leur applique un display:block; , tu t'y retrouvera mieux .

Parce que la tu as beaucoup trop de div , tu peux aussi faire des tableaux sinon pour ton header , vu que ton site n'est pas extensible .
Serieusement la avec tous les div ton site est pas super leger ...


7 Juillet 2007 13:29:55

Oki je vais voir ce que je peux faire :) 
7 Juillet 2007 15:12:22

Pour les bord ombré a gauche et a droite, il suffit de créer une div que tu appelle contener, qui démarrer après body et qui fini avant /body. tu crée ensuite une image de la taille de ton body (900px je crois pour toi) donc 900 + 10 px on va dire tu fais le coter droit ombrer et le coter gauche la meme chose, ensuite dans le css tu met background: url(images/ombre.jpg) repeat-y;

et il va se répeter autant qu'il faut vers le bas...

voilà ++
7 Juillet 2007 15:51:30

Oui mais si je fais ça mais bannière (qui prendra 100% du contener en largeur) va recouvrir les bords non ?
7 Juillet 2007 15:55:30

Fais le contener un peu plus large ou la ban en peux moins...
7 Juillet 2007 16:34:02

Bon finalement j'ai réussi en bidouillant un peu ( vaut mieux pas que je vous dise comment j'ai fait :S) mais en tout cas maintenant ça marche sur IE et sur FF :)  donc merci à vous pour votre aide :) 
7 Juillet 2007 17:06:03

et c valable W3C ?
7 Juillet 2007 17:43:17

Il y a 2 erreurs pour l'xhtml, une avec les pubs Allotraffic et l'autre avec un <center> mal placé... Mais je ne vois pas trop comment y remédier :S
Et pour le .css pas c'est valide...
7 Juillet 2007 17:45:48

<center> ?

lol c une vieille balise morte ca , ca n'est plus reconnu comme balise maintenant .

utilise le css ....
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS