28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je rencontre un dernier problème dans la réalisation d'un site web. Un visiteur m'a rapporté qu'il n'arrivait pas à utiliser les scrolls de certaines pages. Ces scrolls sont générés pas la propriété overflow:auto dans mon CSS.

Voici les pages incriminées :
http://www.fannyjoly.com/ma-vie.html
http://www.fannyjoly.com/me-rencontrer.html

Le tout marche parfaitement sous ie7 (installé sur mon poste) firefox safari et opera. Le problème vient de ie6 qui ne gère, apparemment, pas bien cette propriété.

Avez vous déjà rencontré ce problème ? Si oui comment vous en êtes vous sortis ?

Merci beaucoup pour votre temps et vos réponses.
Modifié par G4sT0n (23 Jul 2008 - 12:47)
Bonjour,

Tu peux tester le rendu avec IE6 en installant Multiple IE (sous Windows XP notamment) ou IETester (sous Windows XP ou Vista).
Hello,

Mmh... J'aurais bien dit la faute au correctif filter pour IE6 et les PNG transparents, mais j'le vois pas (ni dans un hack, ni dans une feuille externe placée via commentaires conditionnels, ni dans un JS) Smiley langue

T'utilises quoi pour gérer la transparence de main.png sur IE6 ?
Modifié par BeliG (22 Jul 2008 - 12:03)
Pour la transparence j'utilise iepngfix

img, div, a, input
{
	behavior: url(/style/iepngfix.htc);
}


Ok pour multiple IE je teste ca de suite.

Je vais essayer de le supprimer et je vous tiens au courant.
Bon c'est iepngfix qui me met la zone.

Auriez vous par hasard un autre script a me proposer ?

Merci pour l'identification du problème en tout cas.
Ah bah voilà Smiley smile

Ton problème est bien lié à l'utilisation du MS filter.

Aucune solution simple n'existe à ce jour pour y remédier. Tu peux essayer d'ajouter position:relative et z-index:10 sur #content, mais ça ne fonctionne que très rarement...

La meilleure alternative à mon sens :
- Redécouper tes images en virant les ombres portées et les enregistrer en .gif (le GIF gère la transparence pure, mais pas les fondus / dégradés en transparence),
- Appliquer ces nouvelles images SEULEMENT à IE6 via les commentaires conditionnels.

Bon courage Smiley smile
Salut,

a mon humble opinion, la meilleure solution est de gérer toutes les transparences en bg de tes divs, tes 'a' etc en utilisant le 'progid filter' pour ie6 attention au chemin de l'image qui en local part du repertoire image et en dev part de la racine de ton projet .
Cette solution fonctionne sur tous les navigateurs a priori, seul bémol, si tu as un container avec un bg transparent, cela te force a mettre tous les liens, paragraphes etc en position: relative, au moins 3 niveaux en dessous me semble t il, sinon rien ne sera sélectionable sous IE6 ... voici un exemple de syntaxe :

background:url(../images/dossier/bg_menu_container.png) left top no-repeat;
_background-image:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dossier/bg_menu_container.png', sizingMethod='crop');/*Lien en http ou partant de la racine de ton projet conseillé en prod*/


Il faut définitivement oublier png fix , c'est une vraie daube (les .htc et autres c'est la meme)... enfin c'est mon avis et je le partage.
Smiley biggrin
a écrit :
Il faut définitivement oublier png fix , c'est une vraie daube (les .htc et autres c'est la meme)... enfin c'est mon avis et je le partage.
Moi je te partage l'info suivante : les JS du type pngfix fonctionnent sur le principe du filter, sauf que les images sont corrigées automatiquement (ce qui évite la feuille de style supplémentaire). Inconvénients :
- le script en lui même est souvent plus lourd que les quelques lignes nécessaires à la correction manuelle,
- si javascript est désactivé... dans l'os !

La seule daube dans l'histoire, c'est IE6.

a écrit :
eul bémol, si tu as un container avec un bg transparent, cela te force a mettre tous les liens, paragraphes etc en position: relative

C'est ce que je lui ai proposé dans mon poste juste au dessus du tien.