Bonsoir tout le monde,
Je rencontre un problème qui me laisse perplexe : dans le cadre du développement d'un projet global, j'insère un div dans un autre div. J'assigne un margin-top au second div (l'enfant donc) et voilà que le père descend également (sous Firefox, pas sous IE).
Voici à quoi ça ressemble, niveau html:
et niveau css:
Si vous regardez http://csmaniac.free.fr/temp/css/, vous comprendrez facilement ce que je veux dire (faites un essai avec IE 6 puis Firefox, la bonne version étant celle d'IE 6). Le problème provient donc de l'ajout du margin-top:142px; dans header-in, qui me permet de descendre les liens au bon endroit.
Quelqu'un pourrait donc m'expliquer ce qui ne va pas dans ce code, pour que cela fonctionne à la fois sous IE et Firefox ?
Merci d'avance pour votre aide
Modifié par wasted (17 Feb 2008 - 01:38)
Je rencontre un problème qui me laisse perplexe : dans le cadre du développement d'un projet global, j'insère un div dans un autre div. J'assigne un margin-top au second div (l'enfant donc) et voilà que le père descend également (sous Firefox, pas sous IE).
Voici à quoi ça ressemble, niveau 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>lautopaloise.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style type="text/css" media="screen">
div#page {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="page">
<div id="header">
<div id="header_in">
<table style="width:100%; font-size:13px; line-height:18px; text-align:center;" border="0">
<tr>
<td style="width:72px;"><a href="truc.asp">Privilèges</a></td>
<td style="width:37px;"><a href="truc.asp">Blog</a></td>
<td style="width:102px;"><a href="truc.asp">Espace Perso</a></td>
<td style="width:85px;"><a href="truc.asp">Réductions</a></td>
<td style="width:85px;"><a href="truc.asp">Kdo Flash</a></td>
<td style="width:120px;"><a href="truc.asp">Petites annonces</a></td>
<td style="width:54px;"> </td>
<td><a href="truc.asp">Contact</a></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
et niveau css:
html, body {
color:#ffffff;
font-family:verdana;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin-top:0px;
height:100%;
top:0px;
}
#page {
margin: 0 auto;
width:861px;
height:729px;
background-color:#000; /* blanc */
position:relative;
top:0px;
}
#header{
/*background-image:url(../img/des_accueil_top.jpg);
background-repeat:no-repeat;*/
background-color:#ffff00; /* jaune */
position:relative;
width:855px;
height:176px;
margin:0 auto;
}
#header_in{
color:#000;
margin-top:142px;
margin-left:217px;
}
#header_in a{
color:#000;
text-decoration:none;
}
#header_in a:Hover{
color:#000;
text-decoration:underline;
}Si vous regardez http://csmaniac.free.fr/temp/css/, vous comprendrez facilement ce que je veux dire (faites un essai avec IE 6 puis Firefox, la bonne version étant celle d'IE 6). Le problème provient donc de l'ajout du margin-top:142px; dans header-in, qui me permet de descendre les liens au bon endroit.
Quelqu'un pourrait donc m'expliquer ce qui ne va pas dans ce code, pour que cela fonctionne à la fois sous IE et Firefox ?
Merci d'avance pour votre aide
Modifié par wasted (17 Feb 2008 - 01:38)