28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Je me résous à poster sur le forum après avoir vainement cherché.
J'ai mis en ligne une v0 d'un site permettant de présenter mes photos.
Tout fonctionne bien sous ie8, chrome et ff. En revanche, ie6 et ie7 me posent problème : les vignettes des photos ne s'affichent pas côte à côte mais l'une en dessous de l'autre comme si le display:inline-block était ignoré (ou comme si le conteneur faisait 100% de la largeur du div).

Voici l'URL : www.photo.gaudiweb.com

Any advice apreciated!

Merci
Salut, effectivement le display:inline-block est ignoré par IE6-7 pour les blocks...
As tu vraiment besoin d'assurer le support de ce vieux navigateur pour présenter des photos ? (là ça dépend du contexte à toi de voir!).

Pour avoir un rendu 'similaire' (les guillemets sont pour une éventuelle dégradation) sur IE6 il va falloir ruser avec des commentaires conditionnels et des styles spécifiques (comme des divs en float:left à la place des inline block).

Bon courage pour l'adaptation à IE 6 (si tu penses que c'est nécessaire).
Oliviadox, merci pour ta réponse.
Tu as raison, je ne pense pas que le support d'IE6 soit nécessaire, je pensais plutôt à IE7 qui est encore assez répandu.
IE7 est assez chi**nt aussi mais quand mêem moins que le vieil IE6.
Pour tes vignettes en inline-block essaye avec des float ça devrait passer sur IE7.
Regarde aussi pour roundies (JS) pour simuler les coins arrondis de tes encarts sur IE 7 et 8.

Sinon le défilement des nouvelles ne marche pas chez moi sur IE tester (pas forcément fiable à voir) y a rien qui apparait dans l'encart Nouvelles.

Et 2 ou 3 problèmes de positionnements (margin/padding) à régler pour IE puis ça devrait rouler à peu près. Et oublie pas de mettre les règles spécifiques dans un commentaire conditionnel style : <!--[if lte IE 8]>
Bonne chance !
Merci Oliviadox,

Je vais explorer ces pistes là.
Pour les news, oui, c'est bizarre, le flash n'apparait pas toujours. Une mauvaise déclaration de l'objet SWF ?!
Pour tester le rendu des différents navigateurs, j'utilise Adobe Browserlab.
Et je vois que le flash est correctement rendu (mon ticker de news à droite). C'est assez pratique, on peut le configurer comme un navigateur à part entière depuis Dreamweaver mais l'inconvénient, c'est la lenteur (on télécharge un screenshot généré par un serveur faisant tourner le navigateur que l'on souhaite simuler).

Visiblement, il semble y avoir une petite limite d'IE Tester avec Flash

Concernant mes coins arrondis, j'ai essayé rondies.js : ça marche bien tant que je ne redimensionne pas le navigateur parce que tous les éléments déclarés dans les rules deviennent fixes chez moi. Du coup, c'est encore plus moche qu'avant.
C'est bizarre, la démo fonctionne bien. Je dois avoir une feuille de style pourrie, hehe.
Salut pour ie7 définir la position 'relative' pour les éléments qui ont double marge fonctionne assez bien.
Quand aux inline_block c'est effectivement bien pratique mais ça ne marche pas.
Préfère un bon vieux { float: left; display: inline; }
Et si jamais tu veux centrer tes floats, tu le mets dans une div en { display: table; margin: 0 auto }