28172 sujets

CSS et mise en forme, CSS3

Bonjour,

La mise en forme CSS-P du blog (http://www.alain-bazot.fr/) sur lequel je travaille actuellement déconne sur IE 6 build 6.0.2800.1106 XP_SP1 alors qu'elle fonctionne bien sous IE 6 build 6.0.2900.2180 XP_SP2.
En version build .2800. la colonne de droit ne commence à s'afficher qu'à la fin de la colonne de gauche.
Sur les autres navigateurs, notamment FF et Safari dans leurs dernières versions, le problème ne se pose pas.

Mieux qu'un long discours, voici une image de la mise en forme qui explose :
upload/9448-pb-alain-ba.jpg

URL du blog : http://www.alain-bazot.fr/
URL de la css : http://www.alain-bazot.fr/wp-content/themes/alainbazot/style.css

Quelqu'un a une idée, une piste ?

Merci de votre aide.

Jean-Philippe. Smiley biggol
Administrateur
Bonjour,

En première hypothèse, "quelque chose" occupe plus de 360px de largeur dans cette colonne de droite.
Pour déterminer quoi, il est possible:
- soit de ne pas afficher la moitié des blocs (display: none;), regarder si cela règle le problème ou pas, faire de même pour l'autre moitié. Puis recommencer avec chaque moitié de la moitié fautive, etc (par dichotomie donc)
- soit de rajouter des couleurs de fond flashy sur tout ce qui existe ou presque (paragraphe, titres, input, etc et chaque div) jusqu'à voir quel bloc dépasse.
Modifié par Felipe (25 Apr 2008 - 12:57)
Bonjour,

Toujours prévoir, lorsque c'est possible, une zone tampon entre des éléments flottants. Ici, je ne vois pas l'utilité de faire se toucher les deux colonnes flottantes, quand visuellement elles sont écartées d'à-peu-près 40px.

Donc faire deux colonnes qui ne se touchent pas, éventuellement ne faire flotter que la première des deux. Enfin, pour éviter qu'un élément trop large ne vienne faire exploser la largeur de l'une ou l'autre colonne, on pourra utiliser overflow: hidden.
Merci pour vos réponses, je vais tester ça.

Autre petite question, connaissez-vous le moyen de tester le résultat sur mon poste avec la version .2800. alors que je suis en .2900. ? D'habitude, j'utilise browsershots.org pour récupérer les screenshots de toutes les versions des navigateurs... Mais là, compte tenu qu'il s'agit d'une build je ne peux pas vérifier en ligne... Il ne me propose que la version 5, 6 (certainement la 2900 vu que cela fonctionne bien) ou 7. Je vais donc devoir déranger ma collègue toutes les deux minutes pour aller voir sur son poste...

Une idée ?

Merci.

JP