comportement ie6/moz padding margin sur un div ????

comportement ie6/moz padding margin sur un div ???? - HTML/CSS - Programmation

Marsh Posté le 14-12-2002 à 03:51:40    

Salut :D
 
bah vala  
 
j'ai un prob de CSS sur un div avec le padding.
Lorsque je met par exemple :
 
body
{
 overflow-y: auto;
 color: #9ED52F;
 background-color: #535353;
 FONT-FAMILY: Verdana;
 FONT-SIZE: 14px;
 FONT-WEIGHT: normal;
 margin: 0;
}
 
div {
 color : #535353;
 text-align : right;
 width: 600px;
 height : 100px;
 background-color : #9ED52F;
 font-weight : bold;
 font-size : 20px;
 font-family : Impact;
 position : absolute;
 top : 0px;
 left : 0px;
}
 
dans le CSS
 
et  
 
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<link title="text" type="text/css" rel="stylesheet" href="1.css">
 
</head>
 
<body>
<div>
Et ça c'est du div :)
</div>
 
</body>
</html>
 
dans ma page.
 
jusqu'a là j'obtiens la même chose sous ie6 et Mozilla 1.2 :D
 
par contre si je rajoute  
    padding: 10px;
 dans le div ça merde.
 
sous ie6 le div fait toujours 600x100px et soustrait les 10px de padding de chaque coté sur les 600x100px.
 
Mais sous Mozilla les 10px de padding sont rajoutés et donc le div fait 620x120px  :fou: donc la mise en page fout le camp.
 
 
http://misterpizz.free.fr/image/div.jpg
 
 
Comment vous faites pour garder la même mise en page lorsque vous avez besoin de padding ?????
 
je vais certainement remettre un autre div dedans mais y'a peut-être moyen de trouver une soluce.


Message édité par jokool le 14-12-2002 à 03:53:35
Reply

Marsh Posté le 14-12-2002 à 03:51:40   

Reply

Marsh Posté le 14-12-2002 à 08:10:10    

Regarde dans la FAQ c'est très bien expliqué  ;)
 
Tiens un lien : http://www.tantek.com/CSS/Examples/boxmodelhack.html


Message édité par Flyman30 le 14-12-2002 à 08:14:10
Reply

Marsh Posté le 14-12-2002 à 10:17:57    

Le DOCTYPE doit se placer avant l'élément <html>. Ça devrait résoudre ton problème pour IE6. Par contre, il ne sera pas résolu pour IE 5.x et dans ce cas il faut appliquer ce qu'a donné FlyMan dans son lien.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed