IE ajoute une colonne blanche

Bonjour,

Je suis en train de personnaliser un blog (design 3 colonnes) et vient d'agrandir la largeur de ma colonne de droite.
- dans FireFox : Nickel
- dans IE : Bill me rajoute une sorte de colonne vide à droite et ajoute l'ascenseur horizontal qui va avec ! Why ? Y a t'il un contournement possible ?

Le site avec l'étrangeté : http://ldmtest.blogspirit.com/

PS : j'ai noté que si je laisse ma colonne de droite avec sa taille 180 px, le même pb survient dès que je "réduit" ma fenêtre (ou ma résolution) en dessous de 1024.
Modifié par Nam (18 Jan 2006 - 15:07)

Alors ? Mon pb n'inspire personne ? Si le défaut n'est pas assez flagrant à droite sur http://ldmtest.blogspirit.com/ je peux faire pire .

Je commence à cerner le pb : il semble que ce soit les blocs content et left qui sont vus comme "trop larges" par IE (alors qu'ils sont width: auto;) et du coup la largeur du bloc container augmente de quelques pixels.

Pourquoi ? je ne me l'explique pas. Merci de votre aide.

incroyable je viens de constater que le pb est 'aléatoire' ou plus exactement dépend du contenu ... j'en perd mon latin !

Merci de votre aide.

Salut,

euh ... chez moi, en cliquant sur le lien donné, je vois exactement la même chose sous Firefox 1.5 et IE6

à la limite, fais une capture d'écran pour que l'on voit ton problème

salut,

Merci de t'interresser à mon cas, voici le screen shot http://server2.pictiger.com/img/13862/computer-games-and-screenshots/bugie-6.jpg sous IE6 en résolution 1024

rappel du pb : ajout d'une colonne blanche par IE à droite du site, ce qui conduit à l'ajout d'une barre de défilement horizontale ... le pire ce bug semble dépendre de 2 paramètres : la résolution écran (en 1200 j'ai pas !) et du 'contenu' sur certaines pages je viens de découvrir que j'ai pas le pb (mais elles ne sont pas nombreuses voir ici).
Modifié par Nam (21 Jan 2006 - 08:18)

Oui, effectivement, comme je suis aussi en 1200 de large, tout était normal Il y a effectivement un problème sous IE ...

Par contre, j'ai voulu jeter un coup d'oeil sur ton code et c'est illisible et ingérable : il est tout en largeur. Il va falloir que tu le présentes mieux si tu veux que l'on t'aide (pense à l'indenter aussi )

Exemple de présentation :

      <div id="firefox">
	  <p>
              <a href="http://www.mozilla-europe.org/fr/"><img alt="Get Firefox!" title="Get Firefox!" src="kit/firefox.gif" /></a>
	  </p>
      </div>

</div>

<div class="corps">

<div id="menu">
	<dl>
		<dt><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
        <dl>
		<dt><a href="" title="Lien1">Lien1</a></dt>
	</dl>
        <dl>
		<dt><a href="" title="Lien2">Lien2</a></dt>
	</dl>

Cela permet de repérer les blocs et de voir si toutes les balises sont fermées par exemples. Très utile pour la maintenance


Modifié par Pandore (21 Jan 2006 - 14:26)

Salut Nam,

Même sans regarder ton code, ce n'est pas très dur de voir d'où vient ton problème.
Ce n'est pas une nouvelle colonne sortie du chapeau de Bill , mais juste la div#container qui est comme poussée....
Pour voir l'élément qui la pousse, il suffit de réduire plus la taille de la fenêtre navigateur, et là tu trouves le coupable : l'image carte de voeux 2006 !

Tu lui as donner une largeur de 600.
Si la div#center dans laquelle elle se trouve dispose de moins de 600, FF rogne l'image, du fait du "overflow: hidden;". En revanche, IE va pousser pour avoir de la place. (IE "rognerait" aussi l'image si la div#center avait une largeur déterminée, mais pas dans ton cas ou c'est juste dimensionné par rapport aux marges de droite et gauche. Je ne sais pas si c'est un bug qui porte un nom quelconque)

Vu que ton image fait 1200 px de large, tu peux lui donner une largeur de 100%, elle s'ajustera automatiquement à la taille de ta div#center

A+

Alan a écrit :
Ce n'est pas une nouvelle colonne sortie du chapeau de Bill , mais juste la div#container qui est comme poussée....

100% exacte j'étais arrivé à la même conclusion !

Par contre pour la suite je te suis moins car je viens de réduire mon image Bonne Année et le pb reste le même : tjs une colonne vide à droite, pour quelle raison le container s'agrandit-il ? Et comment éviter qu'il le fasse sous IE ?

Salut,
Ca me parait évident que c'est du à la largeur de cette image.
Tu l'as réduite de combien ton image? essaie de lui donner une très petite largeur du style 30px, et tu verras bien. As tu essayé une largeur de 100%?

Alan je crois bien que tu es un dieu du CSS

C'est bien l'image qui met le brin (et qui explique pourquoi pour certaines pages c'est OK et pas pour d'autres !).

J'ai testé 100% : la colonne apparaît très grande car en fait dans le source mon width="100%" est traduit/s'affiche comme width="678".

J'ai testé aussi la réduction de la taille de l'image (100px) : la colonne blanche à doite apparaît tjs mais très petite genre 3px, ce serait pas un autre bug IE ?

Rappel de l'objectif : je cherche à faire 3 colonnes de largeurs différentes, je veux que la colonne du milieu puisse contenir de "petites" images et s'adapte à la taille de l'écran(*) sans pour autant que le container ne s'aggradissent sous IE et fasse apparaître de colonne blanche à droite. Sachant que ça marche "tout seul" sous FF, quelle solution ai-je sous IE pour donner une taille (dynamique) à mon image et faire disparaître la colonne de droite de 3px ?

(*) donc pas de max-width d'autant que c'est de toute façon un truc qui n'a pas l'air de marcher sous IE
Modifié par Nam (22 Jan 2006 - 08:41)

Salut Nam,
Merci pour ta remarque, mais je ne suis qu'un débutant qui apprend de trucs que seuls les débutants ignorent

Effectivement la barre de défilement apparaît parfois d'une manière déconcertante : elle disparaît en diminuant la taille de la fenêtre, ou en l'augmentant, et réapparait parfois...
Je ne sais pas s'il y a un truc pour régler ce bug ??

La solution la plus simple serait à mon avis que tu ne définisses la taille de trois blocs en %, là tu es sûr que IE respectera le "overflow: hidden", y compris avec les images.
Il faudrait par exemple mettre 20% aux div#left et div#right, et 60% à la div#center (en adaptant les marges en conséquence)

sinon pour le coup du 100% qui s'affiche en 678px dans la source, tu veux dire dans un blog tu ne peux pas directement contrôler la source ? (j'nai jamais eu un blog...)

Salut Alan,

Si tu veux voir la face cachée d'un blog je te donne l'accès au mien sur simple demande
Modifié par Nam (22 Jan 2006 - 22:41)

Alan a écrit :
La solution la plus simple serait à mon avis que tu ne définisses la taille de trois blocs en %, là tu es sûr que IE respectera le "overflow: hidden", y compris avec les images.
Il faudrait par exemple mettre 20% aux div#left et div#right, et 60% à la div#center (en adaptant les marges en conséquence)

sinon pour le coup du 100% qui s'affiche en 678px dans la source, tu veux dire dans un blog tu ne peux pas directement contrôler la source ? (j'nai jamais eu un blog...)

J'ai accès à la source ... sauf que quand j'enregistre j'ai bien l'impression qu'il (le blog) traduit 100% = n pixels et sauve ce nouveau code HTML.

Sinon pour l'astuce proposée je vois bien comment donner des % aux colonnes, mais par contre je ne vois pas comment gérer les margin correctement dans ce cas !