Mon site incompatible avec IE

fb417508

6 Juillet 2007 14: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

| Etre averti des réponses
| Alerter

Répondre à fb417508

narrateur747

6 Juillet 2007 14:33:39

je suis sous linux donc j'ai pas ie

sinon tu n'as pas éseillé de refaire ton code pour IE?

| Alerter

Répondre à narrateur747

killive

6 Juillet 2007 15: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 ...

| Alerter

Répondre à killive

fb417508

6 Juillet 2007 17:11:40

Oki, je vais déjà commencer par recoder entièrement et voir ce que ça va donner...

| Alerter

Répondre à fb417508

killive

6 Juillet 2007 17: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é ?

| Alerter

Répondre à killive

fb417508

6 Juillet 2007 18: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

| Alerter

Répondre à fb417508

killive

6 Juillet 2007 23: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 ^^

| Alerter

Répondre à killive

allstar27

Expert Programmation

6 Juillet 2007 23: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...

| Alerter

Répondre à allstar27

fb417508

7 Juillet 2007 08: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

*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

| Alerter

Répondre à fb417508

killive

7 Juillet 2007 11: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 ...

| Alerter

Répondre à killive

fb417508

7 Juillet 2007 11:29:55

Oki je vais voir ce que je peux faire

| Alerter

Répondre à fb417508

allstar27

Expert Programmation

7 Juillet 2007 13: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à ++

| Alerter

Répondre à allstar27

fb417508

7 Juillet 2007 13:51:30

Oui mais si je fais ça mais bannière (qui prendra 100% du contener en largeur) va recouvrir les bords non ?

| Alerter

Répondre à fb417508

allstar27

Expert Programmation

7 Juillet 2007 13:55:30

Fais le contener un peu plus large ou la ban en peux moins...

| Alerter

Répondre à allstar27

fb417508

7 Juillet 2007 14: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

| Alerter

Répondre à fb417508

killive

7 Juillet 2007 15:06:03

et c valable W3C ?

| Alerter

Répondre à killive

fb417508

7 Juillet 2007 15: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...

| Alerter

Répondre à fb417508

killive

7 Juillet 2007 15:45:48

<center> ?

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

utilise le css ....

| Alerter

Répondre à killive

Tom's guide dans le monde