Problème de width (ou autre ?) - Internet Explorer 6

Bonjour,

J'ai un site http://www.denischampollion.com que je monte pour un photographe.

J'ai vérifié le site avec le validator du W3C, il apparaît comme valide en strict XHTML 1.0.

Je l'ai testé avec Firefox et Chromium, tout fonctionne.

Je m'attaque donc maintenant à la compatiblité avec Internet Explorer.

À partir de la version 8 ça fonctionne globalement, bien sûr les propriétés CSS3 ne sont pas respectées (border-radius, text-shadow, box-shadow, ainsi que les transitions css3), mais ce n'est pas non plus fondamental pour le fonctionnement du site.

De façon générale, les différentes versions d'Internet Explorer n'arrivent pas à afficher mon champ de recherche et mon menu déroulant avec une couleur transparente (avec rgba) ; ça donne du blanc sur fond blanc ; donc j'ai repassé le menu déroulant en noir pour tout le monde.



Par contre, là où c'est plus gênant, c'est pour Internet Explorer 6. Cf cette copie d'écran :

http://www.denischampollion.com/images/ie6.jpg

On dirait qu'il voit pas la propriété :

width: 974px;

de la classe .thumbs

Ou alors c'est pour une autre raison que je n'ai pas réussi à identifier.

Pouvez-vous m'aider à y voir plus clair ?

Merci

Arnaud

Salut,

La déclaration CSS display: inline-block, pour qu'elle prenne effet sur un élément de type block « par nature » (comme dl) sous IE 7 et 6, doit être corrigée en display: inline pour ces deux versions (pas besoin de flottement ).

Soit dit en passant, est-il normal que le doctype soit déclaré deux fois ?
Modifié par Victor BRITO (27 Oct 2011 - 15:11)

Je viens juste de rajouter un doctype, car je n'atais pas sûr qu' IE lise bien l'autre. Comme ça n'a rien changé, je l'enlève, et je fais ce que tu as dit.

Merci

Alors en fait j'ai trois feuilles de style (Je pars d'un template de Igalerie que je modifie).

dark.css

dark-ie7.css

dark-ie8.css

J'ai fait la modification que tu m'as indiquée dans dark-ie7.css et j'ai copié ce fichier vers dark-ie6.css, puisqu'il n'existait pas dans mon template.

Mais ça ne fonctionne toujours pas. J'imagine que ça aurait été trop beau que IE6 voie sa feuille de style. Je dois probablement faire quelquechose pour cela.

Est-ce qu'il faut que je fasse un HACK CSS ou quelquechose dans le genre ?

Merci

Arnaud04 a écrit :
Je pars d'un template de Igalerie que je modifie

En as-tu l'autorisation ?

Arnaud04 a écrit :
J'ai fait la modification que tu m'as indiquée dans dark-ie7.css et j'ai copié ce fichier vers dark-ie6.css, puisqu'il n'existait pas dans mon template.

Soit dit en passant, pour les commentaires conditionnels, tu peux cibler une version d'IE et les versions antérieures, avec lte : c'est plus pratique pour factoriser des correctifs servant à plusieurs versions d'IE à la fois.

Arnaud04 a écrit :
Mais ça ne fonctionne toujours pas.

Dans le code source du site, je ne vois aucun commentaire conditionnel ciblant IE 6.

Arnaud04 a écrit :
Est-ce qu'il faut que je fasse un HACK CSS ou quelquechose dans le genre ?

Pas de hack CSS.

Victor BRITO a écrit :

En as-tu l'autorisation ?

Euh..je suppose que oui. Igalerie étant libre, et de plus il y a une page de doc sur le site expliquant comment modifier les templates : http://www.igalerie.org/documentation/systeme-de-template

Par contre, il faudrait en effet que je regarde bien la licence utilisée, afin d'être sûr de bien la respecter.

a écrit :
Soit dit en passant, pour les commentaires conditionnels, tu peux cibler une version d'IE et les versions antérieures, avec lte : c'est plus pratique pour factoriser des correctifs servant à plusieurs versions d'IE à la fois.

Je vais travailler dans ce sens.

Merci

Voilà, j'ai ajouté un commentaire conditionnel spécifique à Internet Explorer 6, qui lui indique d'utiliser le feuille css-ie6.css, qui contient la propriété display: inline;

Et ça fonctionne.

Reste un problème de padding je pense, normalement il devrait y avoir 4 vignettes par ligne, il y a largement la place.