Espace en haut de page [résolu]

Bonjour,
revoilà ma page tout simple, avec quelques transformations:
http://www.eslaw.se/test/index.htm
et le css est là:
http://www.eslaw.se/test/style.css
Dans Firefox et Opera il y a en haut de page un grand espace que je voudrais supprimer pour avoir seulement la marge de 20px du div#header comme ca apparaît dans IE7.
En testant avec des backgrounds de différentes couleurs, je n'ai trouvé, pour modifier cet espace, que la solution de donner une valeur à line-height pour le h1, mais je n'arrive pas à un résultat compatible pour les differents navigateurs.
Pouvez-vous m'aider?
Et une question subsidiaire: Y-a-t-il d'autres navigateurs importants à tester?
Modifié par SweetSue (07 Sep 2008 - 16:21)

bonjour,

peut-être qu'en t'inspirant de ce sujet

Bonjour Gil88,
J'ai cela au début du css:
* {margin: 0; padding: 0; }
et même en bricolant sur les marges de body, de #header, de h1, ou de :firstletter,
cela ne supprime pas l'espace dans Firefox.
Je n'ai pas l'impressiopn que ca soit un problème de marge.

Hello,

J'ai l'impression que c'est le pseudo-élément first-letter qui pose ici problème, tout au moins son support par les différents navigateurs.

Lire cet item de la FAQ

Ainsi que le sujet du forum qui y est mentionné.

Florent V. a également fait quelques petits tests à ce sujet

Je n'ai pas cherché de solution...c'est dimanche quand même

Bon courage,
Cdt,
Sylvain

Oui,
la lettrine donne un line-height plus grand dans Firefox que dans IE.
Si j'ajuste la valeur de line-height pour que ca soit calé dans Firefox, il faut que je puisse indiquer une valeurs de line-height différente à l'intention seulement de IE, et je ne sais pas comment faire.
Mais bon, c'est vrai c'est dimanche,
moi aussi je devrais faire une pause...
Merci à tous et à tout à l'heure si vous avez des solutions à me conseiller.

Si tu veux indiquer une information spécifique à IE, tu peux passer par les commentaires conditionnels
Comme ceci par exemple :

<!--[if IE]>
h1:first-letter {
line-height:ta valeur;
}
<![ endif]-->[#blue](sans espace avant le endif)[/#]

As-tu tenté de passer par une image ?
Tu as regardé les tests réalisés par Florent ?

@+

MERCI A TOUS et en particulier à Sylvain!
J'ai résolu le problème grâce à votre aide,
en indiquant dans mon css :

firstletter {line-height: 0.6em} 
et en rajoutant
<!--[if IE]>
<style type="text/css">
#header {margin: 30px 20px 0 20px; }
</style>
<![ endif]-->

dans le head de la page (car je n'ai pas compris comment rajouter ce commentaire conditionnel dans la feuille de css)
En tous cas, ca marche:
http://www.eslaw.se/test/index.htm
Modifié par 6l20 (11 Sep 2008 - 09:33)

SweetSue a écrit :
dans le head de la page (car je n'ai pas compris comment rajouter ce commentaire conditionnel dans la feuille de css)

Bonne intuition, c'est bien là qu'on les place généralement

Considères-tu ton sujet comme [résolu] ?

Bonne continuation