CSS & HTML

Bonjour je suis infographiste depuis quelques années mais je m'interesse de prêt au css depuis peu.
Jusqu'ici j'ai toujours realisés mes sites en html avec des tableaux (arg, que de cauchemars avec les tableaux), je dois pour mon prochain boulot, réaliser en html un site qui exite en flash.
En fait je me suis mis en tête de le faire tout en css avec des positions "absolute" car j'en ai marre des tableaux qui bougent des que tu rajoute une virgule ou un retour à la ligne. J'aimerais savoir si c'est une bonne idée, ou faut-il mieux mettre des positions "relative"? ou je ne sais quoi?

Et si quelqu'un resout ou m'explique du moins, mon problème de différence entre IE et firefox...

Par exemple voici mon css pour que ca apparaisse niquel dans IE :

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 580px;
	width: 960px;
	background-color: #d9c9a8;
}
.principale { /*----------boîte principale----------*/
background-image: url('image/fond_G.jpg');
width: 949px;
height: 337px;
float:left;
border-right: 1px solid white;
border-top: 1px solid white;
border-left: 1px solid white;
position: absolute;
left:8px;
top:41px;
}
.gauche { /*----------boîte gauche----------*/
background-image: url('image/fond_gauche.jpg');
width: 474px;
height: 144px;
float:left;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid white;
position: absolute;
left:8px;
top:378px;
}
.droite { /*----------boîte droite----------*/
background-image: url('image/fond_droite.jpg');
width: 474px;
height: 144px;
float:left;
border-right: 1px solid white;
border-bottom: 1px solid white;
position: absolute;
left:483px;
top:378px;
}
img.droit { /*----------image droite----------*/
background-image: url('image/nouveautes.jpg');
width: 473px;
height: 142px;
float:left;
position: absolute;
left:483px;
top:379px;
}


Et mon css pour que ca marche sous firefox
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 580px;
	width: 960px;
	background-color: #d9c9a8;
}
.principale { /*----------boîte principale----------*/
background-image: url('image/fond_G.jpg');
width: 949px;
height: 337px;
float:left;
border-right: 1px solid white;
border-top: 1px solid white;
border-left: 1px solid white;
position: absolute;
left:8px;
top:41px;
}
.gauche { /*----------boîte gauche----------*/
background-image: url('image/fond_gauche.jpg');
width: 474px;
height: 144px;
float:left;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid white;
position: absolute;
left:8px;
top:380px;
}
.droite { /*----------boîte droite----------*/
background-image: url('image/fond_droite.jpg');
width: 474px;
height: 144px;
float:left;
margin-top: 1px;
margin-left: 1px;
border-right: 1px solid white;
border-bottom: 1px solid white;
position: absolute;
left:484px;
top:380px;
}
img.droit { /*----------image droite----------*/
background-image: url('image/nouveautes.jpg');
width: 473px;
height: 143px;
float:left;
position: absolute;
left:485px;
top:381px;
}

En fait a quelques pixels pret impossible d'avoir le même rendu sous les deux navigateurs, j'ai decider de creer 2 feuilles de style et de mettre dans ma page du javascript qui detecte le navigateur
<!--<script language="javascript" src="menu.js"></script>
<script type="text/javascript">
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.write('<link rel="stylesheet" href="style_ns.css" type="text/css">')
}
else {
document.write('<link rel="stylesheet" href="style.css" type="text/css">')
}
</script> -->


y'a-t-il une meilleure solution? Quelqu'un peut-il me répondre please??
Modifié par zechoupie (01 May 2006 - 12:18)

merci de votre réponse...
Modifié par zechoupie (01 May 2006 - 12:14)

Du code html serait le bienvenu pour pouvoir t'aider, mais peut être que ton problème ne vient que des marges qui sont différentes sous IE et firefox. Dans ton cas où tu positionnes tout en absolu, je te conseille de mettre toutes les marges a 0, en ajoutant donc pour les éléments voulu :

margin: 0;
padding: 0;

Merçi, ca arrange legerement le probleme, en fait j'ai des zones de blocs positionnées en absolute, avec des contours blanc. Dans Firefox c niquel et dans IE il y a un pixel de decalage qui apparait entre chaques blocs; donc je ne sais pas trop comment y remedier exactement.