Je suis en train de créer mon site perso et jusqu'il y a quelques jours, je n'utilisais que I.E pour le css et le rendu. (nooooooooooon pas le fouet !!!
)Seulement depuis j'ai téléchargé FireFox et Opera et bien entendu le rendu n'est pas du tout le meme: les blocs <div> apparaissent décalés sur Opera et Firefox.
Je crois que le probleme vient du fait que j'ai dû utiliser des "Hacks css" pour que Internet Explorer puisse afficher normalement le texte.
J'utilise Mozilla Firefox, Opéra et Maxthon (autrefois MyIE2) qui est un très bon logiciel (gestion des onglets, etc) MAIS qui utilise le noyau d'Internet Explorer 6).
Voila le code (simplifié a mort bien sûr)
CODE
<!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" lang="fr">
<head>
<title>
Index.php
</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Default-Style" content="/css/css_Default.css" />
<meta http-equiv="expires" content="15 days" />
<link rel="stylesheet" type="text/css" href="/css/default.css" />
</head>
<body>
<p>
<div id="cache">
<table id="Tableau_Chargement_page_01" cellpadding="4" cellspacing="4">
<tr>
<td align="center" valign="middle">
<table id="Tableau_Chargement_page_02" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div id="Tableau_Chargement_page_Texte">
<br />
Chargement en Cours...
<br />
Veuillez Patienter
<br />
<br />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache").style }
else if (iex) { cach = cache.style }
largeur = screen.width;
cach.left = Math.round((largeur/2)-200);
cach.visibility = "visible";
function cacheOff()
{
cach.visibility = "hidden";
}
window.onload = cacheOff
//--><!]]>
</script>
<!-- FIN DU SCRIPT -->
</p>
<div id="top">
</div>
<div id="left">
<?php include('includes/Main_Menu-Left.php'); ?>
</div>
<div id="middle">
texte Principal au milieu de la Page.
</div>
<div id="right">
<?php include('includes/Main_Menu-Right.php'); ?>
</div>
</body>
</html>
... et le css:
CODE
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: black;
}
p {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 20px;
}
#top {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 5px solid #ccc;
background: black;
height: 100px;
/* ie5win fudge begins */
/*voice-family: "\"
}
\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px;
/* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: black;
width: 150px;
/* ie5win fudge begins */
/*voice-family: "\"
}
\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px;
/* ie5win fudge ends */
}
#middle {
position: relative;
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: black;
}
#right {
position: absolute;
top: 120px;
right: 0px;
/* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: black;
width: 150px;
/* ie5win fudge begins */
/*voice-family: "\"
}
\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px;
/* ie5win fudge ends */
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
#top {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 5px solid #ccc;
background: black;
height: 100px;
/* ie5win fudge begins */
voice-family: "\"
}
\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px;
/* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: black;
width: 150px;
/* ie5win fudge begins */
voice-family: "\"
}
\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px;
/* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: black;
}
#right {
position: absolute;
top: 120px;
right: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: black;
width: 150px;
/* ie5win fudge begins */
voice-family: "\"
}
\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px;
/* ie5win fudge ends */
}
#Tableau_Chargement_page_01 {
width: 400px;
background-color: #CC0000;
}
#Tableau_Chargement_page_02 {
width: 100%;
background-color: #000000;
}
#Tableau_Chargement_page_Texte {
font-family: Plump MT, arial, helvetica, sans-serif;
font-size: medium;
font-weight: bolder;
color: #CC0000;
}
#cache {
position: absolute;
top: 200px;
z-index: 10;
visibility: hidden;
}
Je précise que les hacks css ne sont pas de moi et ils ne sont pas "valides css" (le validateur du W3C ne les reconnait pas et je tiens à être "aux normes")
Voili voila : Pourriez-vous me dire comment les améliorer et les rendre compatibles avec les navigateurs intelligents et à jour ?
P.S: autre pitite question:
Vous aurez certainement remarqué un autre bug d'I.E: je suis OBLIGE d'encadrer la fenetre qui apparait au chargement de la page par deux balises <p> et </p> sinon Internet Explorer l'affiche tres mal !!!
Or, Firefox ne comprend pas cela (et il a bien raison) et affiche mal la fenetre... une solution ??
Merci d'avance,
.Tom
<modérateur: merci d'utiliser la balise codebox pour les grands extraits de codes>
) de la balise CODEBOX... Je ne suis pas un habitué de ce forum. 
j'ai oublié de préciser: sur Internet Explorer, le positionnement des boites n'est effectif qu'avec les hacks (dans le premier sujet) et ta capture petit-ourson ne comporte visiblement pas les hacks 