Compatibilité avec les navigateurs

Bonjour,

Voilà je viens de faire le graphisme général d'un site internet, mais mon petit problème est qu'il n'est pas vraiment compatible sous tous les navigateurs. J'ai dors et déjà tester sous IE et sous Firefox 1.5, dans un cas il ne marche pas, dans l'autre il fonctionne très bien.
En fait une des colonnes est décalé par rapport à son positionnement défini soit en "absolute" soit en "relative", j'ai donc supposé que le problème venait de là.

Voici les quelques brides de codes :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="carotteRapee">
<meta name="description" content="Faudra penser à trouver une description pour ce site...">
<meta name="generator" content="Microsoft Bloc-notes">
<meta name="Revisit-after" content="7 days">
<link rel="stylesheet" media="screen" type="text/css" href="else.css" title="style" />
</head>

<body>



<div id="sitebar_top">
<div id="sitebar_top_left">

</div>
<div id="sitebar_top_middle">

</div>
<div id="sitebar_top_right">

</div>
</div>

<div id="bigtable">


<div id="header">
<div id="header_left">

</div>
<div id="header_right">

</div>
</div>



<div id="corps">
<div id="corps_left">
<div class="element_menu">
<h3>Navigation</h3>
<ul>
<li><a href="index.php">Acceuil</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="shootbox.php">Shootbox</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Titre</h3>
<ul>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
</ul>
</div>
</div>
<div id="corps_middle">
<div class="liste_news">
liste des news:<br>news1<br>news2<br>news3<br>news4<br>news5<br>news6<br>news7<br>news8<br>news9<br>news10<br>news11<br>news12<br>news13<br>news14<br>news15
</div>
<div class="last_news">
dernière news
</div>
<div class="A_bloc">
bloc A
</div>
<div class="B_bloc">
bloc B
</div>
<div class="links">
links
</div>
<div class="news">
blocs
</div>

</div>
<div id="corps_right">
corps right
</div>
</div>



<div id="sitebar_bottom">
<p>site conçu pour ****<br/>
Copyright © 2006 ****</p>
</div>
</div>
</body>
</html>

Et le css qui va avec :

/* Background */
body
{
margin: 0px;
/*background-color: grey;*/
background: url('images/bg2.gif');
}

/* Sitebar Style */
#sitebar_top
{
position: relative;
height: 30px;
background: url('images/top_bar_bg.gif') right top repeat-x;
}

#sitebar_top_left
{
position: absolute;
top: 0px;
left: 50%;
margin: 0px 0px 0px -500px;
}

#sitebar_top_left A
{
display: block;
height: 30px;
width: 232px;
text-indent: -5000px;
background: url('images/top_bar_logo.gif') left top no-repeat;
text-decoration: none;
}

#sitebar_top_middle
{
position: absolute;
top: 0px;
height: 30px;
right: 50%;
margin: 0px -350px 0px 0px;
}

#sitebar_top_right
{
position: absolute;
top: 0px;
right: 50%;
margin: 0px -500px 0px 0px;
background: url('images/top_bar_bg.gif') right top repeat-x; /* changement de la couleur possible */
}

#sitebar_bottom
{
font-family: Arial;
font-size: 8pt;
padding: 8px;
text-align: center;
background-color: white;

/* border: 0.5px solid red; */
}

/* Bigtable */
#bigtable
{
position: relative;
top: 0px;
width: 1000px;
margin: auto;
background: url('images/bg3.gif');
}

/* Header Style */
#header
{
position: relative;
top: 0px;
width: 1000px;
height: 140px;
background: url('images/test_bg.gif') right top repeat-x;
}

#header_left
{
float: left;
}

#header_right
{
float: right;
width: 468px;
height: 60px
}

/* Corps Style */
/* Corps Left */
#corps_left
{
position: absolute;
top: 126px;
float: left;
width: 160px;
}

.element_menu
{
background-color: white;
background-image: url("images/motif.png");
background-repeat: repeat-x;

/* border: 0.5px solid red; */

margin-bottom: 20px;
}

/* Corps Left Effect */
.element_menu h3
{
color: black;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: orange;
}

.element_menu a:hover
{
color : orange;
text-decoration: underline;
}

/* Corps Middle */
#corps_middle
{
width : 669px;
margin-left: 159px;
margin-bottom: -0.5px;
padding: 5px;

color: black;
/* background-color: white; */
/* background-image: url("images/motif.png"); */
background-repeat: repeat-x;

/* border: 0.5px solid red; */
}

#corps_middle h1
{
color: black;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps_middle h2
{
height: 30px;

/*background-image: url("images/titre.png");*/
background-repeat: no-repeat;

padding-left: 30px;
color: black;
text-align: left;
}

.liste_news
{
width: 350px;
height: 350px;
/* border: 1px solid green; */
background-color: white;
}

.last_news
{
position: absolute;
top: 146px;
left: 552px;
width: 280px;
height: 75px;
/* border: 1px solid green; */
background-color: white;
}

.A_bloc
{
position: absolute;
top: 223px;
left:552px;
margin-top: 20px;
width: 280px;
height: 253px;
/* border: 1px solid green; */
background-color: white;
}

.B_bloc
{
margin-top: 20px;
width: 350px;
height: 250px;
/* border: 1px solid green; */
background-color: white;
}

.links
{
position: absolute;
top: 498px;
left: 552px;
margin-top: 20px;
width: 280px;
height: 250px;
/* border: 1px solid green; */
background-color: white;
}

.news
{
margin-top: 20px;
width: 667px;
/* border: 1px solid blue; */
background-color: white;
}

/* Corps Right */
#corps_right
{
position: absolute;
top: 146px;
left: 839px;
float: right;
width: 160px;
height: 320px;
background-color: white;
background-repeat: no-repeat;
/* border: 0.5px solid red; */
}

Voilà.
J'ai donc pensé que le problème venait des méthodes pour définir le positionnement des blocs entre eux, mais je n'ai pas réelement trouvé d'autres méthodes donnant le même résultats. Je me demandais donc si vous n'auriez pas par hasard une idée quand à ce qu'il faudrait changer, ainsi que la confirmation pour savoir si le problème viens bel et bien de là.

Si vous voulez vous pourrez trouver la page ici.

Ca marche avec firefox , ca marche pas sous IE. Comment changer ca ?

Compatibilité avec les navigateurs

Supprimer

Modérer

Signaler le message aux modérateurs