Bonjour,
Avec ton type de mise en page, tu auras toujours des décalages entre les différents navigateurs à causes des différences de positionnement des blocs en absolute. A moins d'utiliser des hacks conditionnels dans le code ...
En raisonnant différemment, on peut arriver à contourner le truc mais (il y en a un) il faut travailler avec tes images en background, la perte d'information peut être comblée en partie par un texte palliatif en margin-left: -9999px ... Et il faut user d'un petit subterfuge pour masquer les liens images non désirés... Pour une idée :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
width:800px;
margin:0 auto 0;
padding: 0;
background-color: #000000;
}
#haut { /* bloc de référence pour le masque */
width: 800px;
height: 418px;
position: relative;
}
#menu {
color: #FFFFFF;
background-color: #000000;
width: 800px;
margin: 0px;
padding: 0px;
}
#bandeaubas {
background-color: #BDD200;
color: gray;
width: 800px;
margin: 0px;
padding: 0px;
}
#gauche {
width: 500px;
}
#droite {
position : absolute;
top: 440px;
right: 0;
z-index: 400;
}
a{
display: block;
background: url(img1.jpg);
width: 800px;
height: 418px;
}
a:hover {
background: url(img2.jpg);
}
#masque{ /* bloc masquant les liens primaires, il peut être enlevé si tu le souhaites */
position: absolute;
width: 800px;
height: 418px;
left: 0;
top: 0px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="haut">
<a href="#"><span id="droite"><img src="carres-hover.jpg" width="200" height="98" border="0" /></span></a>
<div id="masque">
</div>
</div>
<div id="bandeaubas">
<div id="menu"> Rubrique 1 rubrique 2</div>
<div id="gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Ps : on peut encore améliorer en réduisant la taille des images par détourage de la partie haute fixe ... et en mettant tout le css en externe.
Bon courage
