[Résolu] Wordpress : Décalage Header sous IE6

Bonjour à toute l'équipe d'Alsacréations !

Je vous contacte car j'ai un bug sur un blog Wordpress 2.1 avec le thème K2.
Le Blog en question est visible ici : http://www.passemeprendre.org

Mon problème est le suivant:
Sous IE6, la bannière du blog apparait 4 fois avant le contenu du blog. J'ai vu ça en testant le blog sur un émulateur IE6 (vu sur ce forum, merci les gars ). Sur IE7, tout s'affiche correctement.

Je pense que le problème est dans la balise header dans la feuille de style. Apparemment, IE6 zappe la mention height=200px; Mais peut-être que je fais fausse route...

Quelqu'un a une idée de ce qu'il faut que je fasse ?

Merci à tous

SachaL
Modifié par SachaL (30 May 2007 - 10:33)

Rebonjour à tous...

J'ai réussi à résoudre une partie du problème.
En ajoutant un "no-repeat;" dans la feuille de style, après l'URL de l'image, la bannière ne se duplique plus

...Mais la hauteur pose toujours problème. En effet, quand j'ouvre www.passemeprendre.org sous IE6, j'ai toujours env. 500 px d'écart avant la barre de menu ...

Piste possible:
En bidouillant un peu dans les feuilles de style, je suis parvenu à reproduire le problème sous IE7 en remplaçant la valeur "height: 200px" par "height: auto" dans la feuille de style.
J'en déduis donc que le problème est que IE6 ne "voit" pas le "height:200px" et reste obstinément en valeur par défaut, soit "height:auto".

En surfant sur des forums, j'ai vu que le height était connu pour poser problème sous IE6 de manière générale. Mais je ne trouve toujours pas le hack pour forcer la hauteur du header à 200px...

Quelqu'un a une idée ??? Parce que je désespère un peu ...

=======================

Code source:
Sur le blog, le style du header est défini à 2 endroits sur K2 :

Dans /wp-content/themes/k2/styles.css :

#header {
 padding: 0;
 margin: 0;
 position: relative;
 height: 200px;
 background: #3371A3;
 }

...et dans /wp-content/themes/k2/app/classes/header.php :

 #header {
   background: url("<?php echo get_bloginfo('template_url').'/images/headers/'.$picture; ?>") no-repeat;
  height: 200px;
      }

(J'ai ajouté la partie "no-repeat; height: 200px;", ce qui a provoqué l'arrêt de la répétition de la bannière mais n'a pas eu d'influence sur la hauteur ...)
=======================

Bonjour,

Pour moi, ton décalage est du d'une part à un padding curieux sur le h1 de ton header et un margin malheureux sur ton <p class="description">
Essaye directement dans le code pour voir:

		<h1 style="padding: 0;"><a href="http://www.passemeprendre.org/">Passe Me Prendre - Club de promotion du Covoiturage en Alsace</a></h1>
		<p class="description" style="margin: 0;">-</p>

D'ailleurs, il sert à quoi ce <p>, si c'est pour une question d'accessibilité, il vaudrait mieux mettre ton logo dans le code

Hello Ghost !

Merci beaucoup pour cette info !
Ton post m'a permis de résoudre le problème

Voici l'origine du problème :
Pour ce blog, je voulais un rendu sympa pour le titre et la description.
Comme je n'arrivais pas à obtenir le rendu souhaité (ombré, rayonnement, contour) via la feuille de style, j'ai simplement tout mis dans la bannière sous forme d'image.

J'ai quand même laissé les balises h1 (qui contient le titre) et h2 (qui contient la baseline) en font-size:1px pour que les moteurs arrivent à les lire. Mais pour éviter qu'ils n'apparaissent sous forme de point noir dans la bannière, je les avait décalé à l'aide de padding et de margins importants.

Et c'est bien ce décalage qui a été interprété bizarrement par IE6 et qui m'a balancé mon contenu à quelques 700 pixels plus bas.

J'ai corrigé les padding et margin et tout est rentré dans l'ordre.

Merci beaucoup Ghost PC Buster !!

Je met le post en [résolu]
C'est les ancêtres avec leur IE6 qui vont être contents ...

Re,

Pour "sortir" un élément de l'affichage, le padding n'est pas très recommandé, je te conseillerais plutôt un margin-left (top): -9999px ou un text-indent: -9999px qui n'influencent pas les dimensions des blocs entre autre.