28221 sujets

CSS et mise en forme, CSS3

[Comportements étranges] Mise en page 2 colonnes de même hauteur

Salut à tous, pouvez-vous me dire comment cette mise en page se comporte sur vos différents navigateurs ?
http://demo.pickabee.com/modele.htm

C'est un mix de la feuille de style de Laurent Denis et des suggestions de Elmoustiko pour l'arrière plan.

Chez moi, sous windows XP IE 5.01; 5.5; 6 et sous Mozilla 1.6 tout est bon.

Et vous autres dotés de mac et de son IE 5 qui me pose tant de soucis, ainsi que Safari.... ?
Est-ce que la diplay: table et table-cell passe bien ?

Merci d'avance
Modifié le 19 Nov 2004 - 14:00
Un effet amusant sous opera 7.5x : le contenu des deux colonnes est d'abord affiché "en flux", mais les bordures verticales séparant les deux colonnes sont visibles. Le tout se met en place correctement lorsque les styles auteur sont désactivés puis réactivés... A vérifier cependant sous une version opera 7.54 stable (celle que j'utilise ce soir est une preview trop bidouillée pour être probante)

En revanche, pas de problème dans la preview 7.60.
Pas de problème sous Opera 7.11 et 7.54, sous opera 5.12 et 6, petit différence au niveau largeur du header avec apparition d'un contour rouge

Soucis avec le header pour NN6 (on le voit pas) et NN 7.02, le bloc droite se place sous le bloc image bandeau et le menu se décale sur la droite.

Avec Mozila 1.7b, il faut recharger la page pour que les éléments de la colonne de droite se place correctement.

Eric
Sous Mac OSX :
Safari 1.0.3 (OK)
Firefox 0.9.3 (OK)
Opera 7.51 (OK)
Netscape 7.0 bandeau-droit.gif va se positionner en-dessous de bandeau-gauche.gif
Internet Explorer 5.2 <div id="gauche"> et <div id="droite"> sont de même hauteur, mais le <p>Ut id orci. Sed sit amet risus... est hors du <div id="conteneur"> qui prends la hauteur de <div id="droite">.
Toujours IE 5.2 qui pose problème Smiley bawling
Est-ce que tu verrais une solution pour que ça passe sur ce navigateur ?
J'oublie de remercier tout le monde quand même... Shame on me !
Merci à tous de vos tests Smiley cool

Pis la prochaine fois je me rappellerais qu'il exsite un moyen d'éditer un message qu'on vient d'envoyer pour vous épargner 2 posts successifs...
Modifié le 07 Nov 2004 - 21:04
J'ai fait quelques modifications (les blocs images en haut s'alignent bien maintenant sous Netscape 7 je pense, avec le menu en dessous).
Dans le corps de texte, j'ai rajouté des vignettes (des divs en float qui accueilleront des images au format vignette - il s'agit d'une galerie photo).
Auriez-vous la gentillesse de regarder si tout est ok chez vous ?
Je laisse tomber les corrections IE 5 mac pour l'instant... sinon je vais finir par craquer !
Pas de réactions... bon ok, disons que tout est calé.

Cependant j'ai un comportement très étange que je n'arrive pas à comprendre, j'ai besoin de votre aide :

- sur Firefox quand je charge ma page la première fois (en ayant vidé mon cache), le texte de ma colonne de gauche est coupé en bas (la hauteur de la colonne n'est pas assez grande et on ne voit pas tout le texte). Tout se règle quand j'actualise ma page, le conteneur (je suppose que c'est lui) s'étire à la bonne hauteur et je vois bien le texte entier....

- sous IE, c'est parfois (c'est bête de dire ça, mais c'est bien vrai : chez moi sous IE 6 win xp pro pas de problème, sur un autre poste IE 6 win xp familial c'est différent) l'affichage de ma colonne de droite est mal fait :
le texte d'accroche vient se mettre en dessous de mon texte de gauche et l'image se met encore en dessous. La encore, si j'actualise la page, tout se cale bien...

- sous Mozilla 1.7 les images de la partie gauche ne se chargent pas, seules les légendes s'affichent. Et là encore, si j'actualise ma page, elles apparaissent bien et tout est bien calé...

Bref, je ne comprends pas ce truc de "mise en page à retardement".
Est-ce que vous avez une idée de ce qui peut se passer ? Smiley eek
Je vais tester, mais les images qui ici sont des petites vignettes gifs seront au final des photos de taille plus important, extraites d'une base de données à l'appel de la page et envoyées avec php. J'ai du mal à comprendre que je puisse avoir un tel problème avec des gifs hyper légers...

J'ai peur de me retrouver avec une lenteur à l'affichage si je dois en plus coder un preload d'images aléatoires avant chaque affichage de page en php.

Et puis, qu'est-ce qui se passe en fait ? J'aimerais bien comprendre. Smiley help
cktoon a écrit :

Et puis, qu'est-ce qui se passe en fait ? J'aimerais bien comprendre. Smiley help


Et bien il se passe ce que tu décrivais plus haut. Il faut actualiser la page pour que l'affichage soit ok, mais pas tout le temps. Des fois c'est ok la première fois, et des fois non.

Je n'ai pas encore eu le temps de me pencher vraiment sur le problème.
Stephan a écrit :

Et bien il se passe ce que tu décrivais plus haut. Il faut actualiser la page pour que l'affichage soit ok, mais pas tout le temps. Des fois c'est ok la première fois, et des fois non.

Merci de confirmer ce que je décris, on pourrait me croire débile ! Smiley lol
Je viens de rajouter le préchargement d'images en début de page : pas de changement, toujours le même problème.

[Edit]
Personne n'a une idée ? Smiley cavapa
[/Edit]
Modifié le 24 Nov 2004 - 20:31
Apparemment, le problème disparait dès lors que je supprime les padding des paragraphes contenus dans chaque colonne...
Le padding est-il incompatible à l'intérieur d'un bloc en table-cell ?

[Edit]
Finalement... non, problème toujours identique : si la page s'affiche correctement (par chance) une fois ou deux, si on actualise plusieurs fois, on finit par avoir des affichages problématiques... puis à nouveau ça se cale... etc.
La CSS aléatoire... Y a rien de plus énervant Smiley fulmine
Dans une minute, je reprends mes tableaux...
[/Edit]
Modifié le 24 Nov 2004 - 23:16
Sujet clos
Aller à