pb d'affichage sous ie6... :(

[AntoineD]

Salut à tous !

J'ai récemment mis à jour mon site photo : http://photo.ad.free.fr

Il a l'air tout beau sous safari et firefox (quoique : il manque une ligne transversale en dessous de la liste des galeries alors qu'elle est bien présente dans safari), et même sur mon vieux pc 800x600 (ie 5 ou 6 je sais plus) mais là, à la fac, ie 6... ben je me retrouve avec la galerie en dessous de mon bloc "float"... cf. image ci-jointe.

Qui peut m'expliquer pourquoi ?

Merci d'avance !

 

[Niconemo]

Tu as une div #galid pour la partie menu-gauche

#galid {
	width: 100px;
	float: left;
	margin-right: 20px;
}

Tu devrais peut être aussi inclure le contenu (les vignettes) dans une div. de même type en float-right. Je pense que ça marchera. Et si ça ne marche pas il faudra chercher d'autres positionnements mais pour ça il faut une div.
En théorie ça devrait marcher sans, on est d'accord, mais bon IE6 c'est IE6... (j'envisage sérieusement d'acheter un PC uniquement pour débugguer les sites pour cette saloperie utilisée par 90% des internautes :hein: )

Et pour le filet pointillé qu'il te manque dans FireFox, c'est un "#" qui manque ;

.menubox {
border-bottom: 1px dashed #cbcbcb;
padding-bottom: 15px;
}

 

[AntoineD]

Merci beaucoup pour ton aide !
Je vais voir ça très vite. J'espère que ça roulera...

Et pour le filet pointillé qu'il te manque dans FireFox, c'est un "#" qui manque ;

Ben ! ça alors, même en faisant mon code avec css edit, j'arrive à l'oublier... grrr.

 

[AntoineD]

Mon cher niconemo, j'étais véritablement plein d'espoir avec ton idée du "float right" pour les vignettes, mais ça donne ça, malheureusement:

je fais comment, pour contourner ce problème de bloc supérieur qui ne s'allonge pas en fonction des boîtes à l'intérieur ? Je suis pas encore très fort en css... :siffle:

 

[mfay]

Moi, je ferai ça :

Un DIV pour faire la bordure de la page

. Un DIV pour entourer le bloc de base

. . Un DIV pour le haut du Bloc de fond de Page
. . Un DIV pour le milieu du Bloc de fond de Page
. . Un DIV pour le bas du Bloc de fond de Page

Dans le DIV du milieu
. . Un DIV pour la Gauche en FLOAT
. . Un DIV pour le contenu (avec de simple margin)

En gros, j'entoure chaque bloc de mise en page par des DIV et après je remplis

J'ai fais plein d'essais qui sont regroupés dans cette page. Les styles ne sont pas toujours beaux, mais c'était pour faire des tests. Ca marche presque identiquement entre tous les navigateurs (même si Explhorreur PC m'a fait beaucoup de misères). Le même document peut être vu avec plusieurs styles, un menu permet de voir le contenu des feuilles de style.

 

[AntoineD]

Moi, je ferai ça :

(...)

Dans le DIV du milieu
. . Un DIV pour la Gauche en FLOAT
. . Un DIV pour le contenu (avec de simple margin)

En gros, j'entoure chaque bloc de mise en page par des DIV et après je remplis

Ben, c'est un peu l'idée déjà développée, non ? Mais le div qui entoure mon encart et mon contenu, comment je fais pour qu'il s'allonge de manière normale ? cf. message au-dessus

 

[mfay]

C'est pas facile.

en général, soit j'utilise un "Position: absolute", soit je n'en utilise pas. Mais j'évite le "position: relative" qui est mal reconnu (surtout IE).

Pour ton cas, je n'utiliserais pas cette option "Position:". Le DIV de contenu qui doit allonger l'image ne doit pas être FLOAT ou avec POSITION, uniquement avec une Marge Gauche qui laisse passer le bloc de gauche.

Après, il faut faire pas mal d'essais

Ta feuille de style est un peu fouilli, c'est pas facile à voir ce qui sert à la mise en page ou à la mise en forme du texte. Tu devrais mettre un peu de commentaires pour qu'on s'y retrouve.

 

[AntoineD]

c'est vraiment emmerdant, ie6... :siffle:
bon je vais essayer de faire ce que tu me dis !

 

[AntoineD]

Pour ton cas, je n'utiliserais pas cette option "Position:". Le DIV de contenu qui doit allonger l'image ne doit pas être FLOAT ou avec POSITION, uniquement avec une Marge Gauche qui laisse passer le bloc de gauche.

J'ai essayé ça, je n'y arrive pas : quoi qu'il arrive, ce fichu bloc reste en dessous avec Firefox.
Là, j'ai tout de même un peu nettoyé ma css et tenté différente approche, notamment en éliminant la notion "relative" et "float" aussi, mais le bloc qui s'appelle maintenant "vignette" reste en dessous...

Bon, il va falloir que je file à la fac si la manière dont j'ai réécrit leur position fonctionne... je croise les doigts. Dans le cas contraire, si tu as un bout de code à me proposer, je suis preneur ! :siffle:

 

[mfay]

C'est bizarre. Je n'arrive pas à reproduire l'anomalie en ayant récupéré les fichiers sur mon micro. Alors que quand je regarde le site en direct, j'ai l'anomalie ??? (via l'émulateur PC de mon Mac).

Si je ne peux pas le reproduire, ça va pas être facile de tester

 

[mfay]

Accessoirement, ton anomalie ressemble pas mal à un problème de largeur de bloc ou de contention entre la largeur et la marge droite.

Quand on agrandit la fenêtre tout rentre dans l'ordre.

 

[AntoineD]

Bon, j'ai modifié la css... je vérifierai à la fac. tu veux pas regarder ?

 

[mfay]

Toujours pareil

 

[AntoineD]

Toujours pareil

bon, il me semble qu'il n'y a plus de problème avec les galeries, tu confirmes ?

En revanche, le texte pose problème... c'est tout de même dingue ! je vais essayer d'en modifier la largeur... :mad:

 

[mfay]

C'est une question de largeur de fenêtre. Quand je réduit la taille de la fenêtre avec explorer, les images se placent toujours en dessous du texte. Je vois encore le pb.
Je ne comprends pas pourquoi avec Firefox PC je n'ai pas le pb.

C'est très bien les CSS. Mais dès fois c'est galère

 

[AntoineD]

C'est très bien les CSS. Mais dès fois c'est galère

Oui, je ne te le fais pas dire !