Bonjour à tous,
débutant en XTML/CSS, je me heurte au problème suivant.
Je créé un document ultra simple contenant une div container, elle même comprenant un paragraphe.
Je définis une margin-top pour la première et unique <div> de mon document.
Avec IE7, la marge est calculée par rapport à l'élément <body>, laissant apparaitre la couleur de fond de l'élément <body>
Avec IE8/FF3.6/Chrome4.1, la marge est calculée par rapport à l'élément <html>: on ne voit pas apparaitre la couleur de fond de l'élément <body>.
Je cherche à comprendre la raison de cette différence de comportement, et j'espère qu'elle m'aidera à résoudre mes problèmes de "dimensionnement" que je rappelle brièvement ci-dessous :
Contexte:
Ce problème m'est apparu en cherchant à utiliser les propriétés du DOM clientHeight, offsetHeight et offsetTop pour redimensionner des éléments d'une page en fonction de la taille de la fenêtre. => j'observe toujours une différence (dont la valeur est égale à la valeur de la margin-top de la première div de mon document) entre le offsetHeight de l'élément <body> et l'offsetHeight de l'élément <html>.
De plus, je n'ai trouvé aucune propriété reliée à <body> ou à <html> me permettant de connaître l'existence de cette "pseudo marge" existant ces deux éléments.
Je précise par ailleurs que dans mon "projet réel", j'utilise la feuille de style reset-fonts.css de Yahoo pour réinitialiser les valeurs CSS par défaut des navigateurs. Mais cela n'a aucune conséquence sur le problème
Voici un petit code permettant d'illustrer mon problème:
Avec ce code, si on utilise IE7 (ou, en ce qui me concerne, IE8 en mode "Norme d'Internet Explorer 7"), on voit apparaitre la couleur de fond bleue de l'élémént <body>. Avec les autres navigateurs mentionnées, on ne voit pas cette couleur.
Si quelqu'un peut m'expliquer cette différence de comportement, j'en serais ravi.
Merci
Cordialement
Philippe
Modifié par phil23 (27 Apr 2010 - 11:59)
débutant en XTML/CSS, je me heurte au problème suivant.
Je créé un document ultra simple contenant une div container, elle même comprenant un paragraphe.
Je définis une margin-top pour la première et unique <div> de mon document.
Avec IE7, la marge est calculée par rapport à l'élément <body>, laissant apparaitre la couleur de fond de l'élément <body>
Avec IE8/FF3.6/Chrome4.1, la marge est calculée par rapport à l'élément <html>: on ne voit pas apparaitre la couleur de fond de l'élément <body>.
Je cherche à comprendre la raison de cette différence de comportement, et j'espère qu'elle m'aidera à résoudre mes problèmes de "dimensionnement" que je rappelle brièvement ci-dessous :
Contexte:
Ce problème m'est apparu en cherchant à utiliser les propriétés du DOM clientHeight, offsetHeight et offsetTop pour redimensionner des éléments d'une page en fonction de la taille de la fenêtre. => j'observe toujours une différence (dont la valeur est égale à la valeur de la margin-top de la première div de mon document) entre le offsetHeight de l'élément <body> et l'offsetHeight de l'élément <html>.
De plus, je n'ai trouvé aucune propriété reliée à <body> ou à <html> me permettant de connaître l'existence de cette "pseudo marge" existant ces deux éléments.
Je précise par ailleurs que dans mon "projet réel", j'utilise la feuille de style reset-fonts.css de Yahoo pour réinitialiser les valeurs CSS par défaut des navigateurs. Mais cela n'a aucune conséquence sur le problème
Voici un petit code permettant d'illustrer mon problème:
<!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">
<head>
<style>
html { background: red;}
body { background: blue;}
#container {
background: green;
margin-top:10px;}
</style>
</head>
<body>
<div id="container">
<p> ceci est le texte du container</p>
</div>
</body>
</html>
Avec ce code, si on utilise IE7 (ou, en ce qui me concerne, IE8 en mode "Norme d'Internet Explorer 7"), on voit apparaitre la couleur de fond bleue de l'élémént <body>. Avec les autres navigateurs mentionnées, on ne voit pas cette couleur.
Si quelqu'un peut m'expliquer cette différence de comportement, j'en serais ravi.
Merci
Cordialement
Philippe
Modifié par phil23 (27 Apr 2010 - 11:59)