Espace blanc inexplicable sous IE + autres bugs

[Kreestal]

Bonsoir à tous!

C'est après trois jours de modification acharnée de CSS et de tests en tous genres sur différents navigateurs (Firefox, IE6, I7, IE pour Mac, Safari, Opéra...) que je touchais au but, quand j'ai dû réaliser qu'IE était plus fort que moi. J'ai plusieurs gros bugs que je ne parviens pas à résoudre toute seule.

Pour info, mon blog utilise Wordpress 2.1.1, soit la toute dernière version.

Edit: ma feuille de style se trouve à cette adresse.

• Espace blanc inexplicable dans IE6: je n'ai jamais vu un bug pareil. Rendez-vous, avec IE6, sur l'article suivant. Le billet, contenu dans la div "content", commence par une image, suivie ensuite par du texte. Dans Firefox et IE7, tout va bien. Par contre IE6 rajoute un inexplicable espace blanc énorme entre le titre du billet et l'image... Je ne comprends pas pourquoi!!! J'ai beau regarder la source, je ne vois rien de suspect (cependant je n'arrive pas à valider ma page en Strict, peut-être est-ce dû à ça?).
  
  Le même problème se pose, à d'autres endroits (à croire que ce bug n'en fait qu'à sa tête) du site, en particulier sur les billets n'ayant eu aucune réponse. Exemple ici (à consulter avec n'importe quelle version d'IE cette fois): l'espace blanc se trouve désormais au bas de la page, sous le formulaire de commentaire.
  
  
• Problème de padding ou de margin: à ce problème d'espace blanc inexplicable se greffe un problème de padding ou de margin (je n'ai pas réussi à l'identifier) sur les billets n'ayant pas encore reçu suffisamment de commentaires pour "pousser" le formulaire de commentaires au plus bas de la page (?). Exemple encore ici à regarder dans n'importe quelle version d'IE: la div "content" est mystérieusement collé à la div "sidebar", alors que cela ne doit pas être le cas.
  
  
• Des règles différentes pour des navigateurs différents: enfin, le petit bonus est que je me prends les pieds dans les différents hacks, pour IE6, IE7, pour que quelque chose fonctionne dans Firefox mais pas dans IE, bref, ma css est assez épouvantable. J'ai lu des articles sur les commentaires conditionnels, mais j'hésite à les utiliser car je ne sais pas si les CSS ainsi indiquées prendront le pas sur la CSS principale pour les navigateurs auxquelles elles s'adressent en particulier. Je dois avouer que les différences padding et margin IE/FF commence à sérieusement me prendre la tête...
  

Si vous pouviez éclairer mon chemin tortueux de vos respectables lumières, j'avoue que vous me libéreriez d'un immense poids.

D'avance merci à vous!

Modifié 28 Février 2007 par Kreestal

[ghost]

Bonjour,

Pour solutionner tes espaces blancs, c'est sûrement un problème d'haslayout (http://www.test.blog-and-blues.org/haslayout/trad_temp.html) et tu devrais pouvoir le régler en ajoutant à tes blocs concernés un height: 1%;

<div style="height: 1%;" class="post" id="post-99">

là vite fait dans le code et à l'arrache pour ta page Le bruissement de tes ailes... Encore un mystère d'IE

Je pense que la solution de ton problème est identique pour tous les défauts constatés.

Pour ce qui est des commentaires conditionnels, je te conseille plutôt que les hacks c'est beaucoup plus "robuste" en cas de mise à jour du navigateur.(http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows)

Modifié 1 Mars 2007 par ghost

[Kreestal]

Bonjour,

Pour solutionner tes espaces blancs, c'est sûrement un problème d'haslayout (http://www.test.blog-and-blues.org/haslayout/trad_temp.html) et tu devrais pouvoir le régler en ajoutant à tes blocs concernés un height: 1%;

<div style="height: 1%;" class="post" id="post-99">

là vite fait dans le code et à l'arrache pour ta page Le bruissement de tes ailes... Encore un mystère d'IE

Je pense que la solution de ton problème est identique pour tous les défauts constatés.

Pour ce qui est des commentaires conditionnels, je te conseille plutôt que les hacks c'est beaucoup plus "robuste" en cas de mise à jour du navigateur.(http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows)

Bonjour ghost, merci beaucoup pour ta réponse (postée à 2h30 du mat'!!) ;-)

J'ai rajouté le hack que tu suggères dans la div que tu suggères (sous la forme d'une class .gainlayout comme indiqué sur le site que tu as linké):

<div style="height: 1%;" class="post" id="post-99">

...mais cela n'enlevait (en tout cas sur la bécanne que j'utilise à la fac) que le blanc qui existait avant l'image, et pas le problème de padding/margin et l'espace blanc sous le formulaire que j'avais sur la 2e page dans IE6.

Du coup j'ai appliqué la class à la div supérieure (la div "content"), en supprimant la class de la div que tu suggérais, et là ça a fonctionné.

Edit: je me suis réjouie trop vite: le problème n'est pas réglé dans Firefox: le même espace blanc se situe sous le formulaire de commentaire sur cette page. Je ne comprends pas

Quant aux commentaires conditionnels, je me pencherai dessus dès que ces problèmes de CSS seront réglés! Il me semble en effet que ça doit être plus propre et plus fiable.

Modifié 1 Mars 2007 par Kreestal

[Kreestal]

De retour chez moi j'ai testé la page problématique avec IE7: test non concluant.

Pour résumer:

• IE7: la div "content" est collée à la div "sidebar" alors que cela ne devrait pas être le cas. Sur le reste du site ça fonctionne a priori. Seule cette page coince, et j'ignore pourquoi! En outre, il y a un espace blanc incompréhensible en bas de la page, sous le formulaire de commentaire. Edit: problème résolu grâce au hack donné dans ce lien:
  
  

  <!--[if IE 7]><style>
  .gainlayout { zoom: 1;}
  </style><![endif]-->

  
  
  

• Firefox 2: du coup ne reste plus que le problème posé dans Firefox: l'espace blanc qui se trouve en bas de cette page sous le formulaire de commentaire.
  

Le problème est résolu!! Que ça soulage!!

Pour reméder au bug dans Firefox, je me suis aidée de ce très bon article. Ainsi, il fallait préciser "overflow:auto" dans la class .gainlayout (ici, appliquée à la div "content").

Modifié 1 Mars 2007 par Kreestal

[buzzistic]

je suis complétement hors sujet mais je vais l'assumer : j'aime beaucoup ce que tu écris. Du style, de la vie, une vraie intention de partager des pensées.

[Kreestal]

je suis complétement hors sujet mais je vais l'assumer : j'aime beaucoup ce que tu écris. Du style, de la vie, une vraie intention de partager des pensées.

Wow, merci beaucoup! Très touchée que tu apprécies.

[ghost]

Bonjour,

Tu aurais eu le même résultat en donnant un height: 1% a "content", je crois que je m'étais mal exprimé hier soir (matin?). Mais la solution que l'on trouve est toujours la meilleure ... Bon courage et bonne continuation (c'est vrai qu'il sont bien beaux tes textes ...)

[Kreestal]

En fait c'est ce que j'ai fait! Au départ je ne l'avais appliqué qu'à la div contenant le post, et ensuite, j'ai remarqué que cela ne corrigeait pas tout, donc j'ai, au pif, tenté de l'appliquer à "content" et en effet ça a fonctionné. Rien de tout cela n'aurait été possible sans ton aide précieuse! Je ne suis qu'un petit padawan.

Merci d'avoir pris le temps de survoler mes scribouillages...*

[Kreestal]

Ahum, c'est à nouveau moi, encore un problème du même genre sur le même site.

Voyez par vous-mêmes: mon footer est étrangement décalé sur les "pages" du sites (comme celle que j'ai donné en exemple), alors qu'il ne l'est pas a priori sur les billets (exemple de "billet").

Ce problème n'a été rencontré que dans Firefox.

Par contre, dans IE 6 et IE7, un nouveau problème sorti de la cuisse de Jupiter: les commentaires et le formulaire de commentaire s'affichent mal maintenant, très décalés sur la gauche; or, si je passe la souris sur les liens que ces éléments contiennent éventuellement, tout se remet en place...

Ce qui est bien avec les CSS, c'est qu'on est toujours surpris

[Kreestal]

Bon, dommage que je ne puisse pas éditer mon précédent message.

Je tiens juste à préciser les choses grâce à des captures d'écran:

- Firefox only : la div "footer" se décale curieusement vers la droite, alors qu'elle devrait être sous la div "content" qui est au-dessus d'elle. Cela n'arrive que sur certaines pages en plus, et pas sur toutes... ;;

Je travaille avec Wordpress, et ce problème ne concerne que les "pages" (=contenu fixe, comme "à propos", "contact"), et non les "billets" (=les articles ajoutés régulièrement au blog).

Exemples de "pages" où le footer s'affiche mal:

• A propos
  
• Tags
  

Exemples de "Billets" qui ne sont pas concernés et où le footer s'affiche bien:

• Bruissement
  
• Oxyde
  

Je ne comprends pas! Les marges sont exactement les mêmes sur les deux gabarits, il doit donc s'agir d'un bug d'affichage et non d'une différence dans ma CSS.

* A noter que ce bug n'existe pas sur IE *

- Internet Explorer 6 et 7 only: alors là, accrochez vos ceintures. Au chargement d'un "billet", j'ai désormais ce très pénible bug d'affichage:

Autrement dit: certains champs de formulaire ainsi que certains commentaires semblent soudain avoir une marge négative qui sort d'on ne sait où.

Mais ce qu'il y a de plus bizarre, c'est que quand je passe la souris sur les liens existants dans ces morceaux de texte décalés, ils se remettent à leur place. Ci-dessous, l'exemple pour le titre "Ecrire un commentaire", remis soudain à sa place quand la souris survole les liens "Fil RSS" ou "Trackback":

Une vache n'y retrouverait pas ses veaux...

* A noter que ce bug, lui, n'existe pas dans FF *

Quelqu'un pourrait-il m'aider SVP?

Modifié 13 Mars 2007 par Kreestal

[Kreestal]

Petite mise à jour: ne trouvant pas de solution aux problèmes évoqués ci-dessus, j'ai repris ma CSS depuis le début et fait le grand nettoyage (en écrivant notamment deux CSS propre à IE 6 et 7, incluses dans mes pages grâce aux commentaires conditionnels).

Le problème sous Firefox est donc réglé (bien que je ne comprenne pas trop à quoi il était dû).

Par contre, on s'en doutait, le problème sous IE résiste: toujours ce même bug d'affichage évoqué dans le post précédent:

- Internet Explorer 6 et 7 only: alors là, accrochez vos ceintures. Au chargement d'un "billet", j'ai désormais ce très pénible bug d'affichage:

Autrement dit: certains champs de formulaire ainsi que certains commentaires semblent soudain avoir une marge négative qui sort d'on ne sait où.

Mais ce qu'il y a de plus bizarre, c'est que quand je passe la souris sur les liens existants dans ces morceaux de texte décalés, ils se remettent à leur place. Ci-dessous, l'exemple pour le titre "Ecrire un commentaire", remis soudain à sa place quand la souris survole les liens "Fil RSS" ou "Trackback":

Une vache n'y retrouverait pas ses veaux...

* A noter que ce bug, lui, n'existe pas dans FF *

Quelqu'un pourrait-il m'aider SVP?

Ajoutons que cela concerne aussi le corps de mes billets, en plus des commentaires. Voir ici une illustration du bug dans IE6 (déroulez la page au niveau des derniers commentaires, puis survolez les liens avec votre souris).

J'ai supprimé le hack hasLayout car finalement avec le remaniement de ma CSS, il faisait plus de mal que de bien.

D'avance merci pour toute suggestion, toute piste, aussi infime soit-elle, car là je suis vraiment bloquée...

[ghost]

Salut,

Pour ie6 essaye:

blockquote {
	margin: 1em 0 0 1em;
	border-left: 4px solid #939393;
	background-color:#f1f1f1;
	font-style:italic;
}

Avantageusement remplacé par

.commentlist li p{
	margin-left: 1em;
}

Modifié 19 Mars 2007 par ghost

[Kreestal]

Ghost, tu mérites une médaille en chocolat pour ton aide! ça fonctionne nickel maintenant

C'est quand même bizarre qu'IE "bloque" sur le padding (ici, c'était le padding bottom qui posait problème... oO)

Topic résolu! :!: