Espace en haut de page [résolu]

Auteur
SweetSue	# 07 Sep 2008 - 12:59:00
11 Posts	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)
11 Posts
Gil88	# 07 Sep 2008 - 13:13:28
89 Posts	bonjour, peut-être qu'en t'inspirant de ce sujet
89 Posts
SweetSue	# 07 Sep 2008 - 13:35:24
11 Posts	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.
11 Posts
6l20	# 07 Sep 2008 - 14:24:56
Les kiwis...quand je veux ! Modérateur 1825 Posts	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 XHTML: structure. CSS: présentation. Javascript: comportement.
Les kiwis...quand je veux ! Modérateur 1825 Posts
SweetSue	# 07 Sep 2008 - 14:50:27
11 Posts	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.
11 Posts
6l20	# 07 Sep 2008 - 15:06:34
Les kiwis...quand je veux ! Modérateur 1825 Posts	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]-->(sans espace avant le endif) As-tu tenté de passer par une image ? Tu as regardé les tests réalisés par Florent ? @+ XHTML: structure. CSS: présentation. Javascript: comportement.
Les kiwis...quand je veux ! Modérateur 1825 Posts
SweetSue	# 07 Sep 2008 - 15:58:57
11 Posts	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)
11 Posts
6l20	# 07 Sep 2008 - 16:18:47
Les kiwis...quand je veux ! Modérateur 1825 Posts	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 XHTML: structure. CSS: présentation. Javascript: comportement.
Les kiwis...quand je veux ! Modérateur 1825 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles