Problème d'apparition d'ombre portée non désirée sur Explorer

Bonjour,


J'ai besoin d'aide pour une colle...


Je suis en train de faire des modifications sur mon blog (http://leslecturesdecachou.over-blog.com/), et j'utilise un "blog test" pour cela. J'ai rajouté de petites ombres portées d'1 pxau texte pour donner un effet de relief et j'ai également rajouté un cadre d'1 px aux images, entre autres. Et pourtant, l'un dans l'autre, quelque chose a complètement bousillé la présentation internet explorer du blog, car apparaît sous Explorer une ombre portée bien plus importante, généralisée même aux images, qui en plus d'être affreuse rend le texte illisible.

Sous Firefox (et Chrome et Opera): http://img189.imageshack.us/img189/8709/blogfirefox.jpg
Sous Explorer: http://img11.imageshack.us/img11/9862/blogexplorer.jpg

Le blog test: http://cachoutest.over-blog.com/


Sauriez-vous ce qu'il faudrait faire pour supprimer ces ombres non désirées?


EDIT: je suis en train de faire les vérifications demandées dans le premier sujet de cette section du forum, mais comme je ne comprends pas le tiers de ce que j'y lis, j'ai quand même posé ma question...
Modifié par Cachou82 (04 Sep 2011 - 23:30)

Salut,

Fais attention,
3 liens /4 ne marchent pas.

404 Not Found et Erreur 404 : La page demandée n'existe pas.
En fait je n'arrive a voir que ton screen sous IE...

Modifié. Des "/" surnuméraires que je ne me souviens pas d'avoir mis.
Modifié par Cachou82 (04 Sep 2011 - 23:32)

fais voir le css stp

sur le navigateur c'est illisible.
Modifié par jmlapam (04 Sep 2011 - 23:38)

Tous les CSS? (je viens de l'examiner, il fait 19 pages Word)

Je pense que le problème provient d'un code qu'un ami m'a donné pour faire le relief de l'écriture (auquel je tiens énormément)(le relief, pas le code, ni l'ami ^_^) et qui, je pense, n'est pas reconnu par Explorer (quoique, je ne vois pas pourquoi les images auraient du coup également une ombre portée):

text-shadow: 1px 1px 1px #e3fcf8;
filter: dropshadow(color=#e3fcf8, offx=1, offy=1);


Si pas, quelle partie du CSS dois-je copier?

jette un coup d'oeil ici:
http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html




Il y a tout un passage sur IE
Modifié par jmlapam (04 Sep 2011 - 23:50)

Alors les seuls trucs que j'aie modifiés en ce qui concerne les images et l'écriture sont ce code rajouté pour les ombres portées et mis à chaque fois qu'une couleur d'écriture est mentionnée, le fameux:

text-shadow: 1px 1px 1px #e3fcf8;
filter: dropshadow(color=#e3fcf8, offx=1, offy=1);

(toujours sous cette forme, avec deux couleurs différentes:
color: #5b5353 ! important;
text-shadow: 1px 1px 1px #e3fcf8;
filter: dropshadow(color=#e3fcf8, offx=1, offy=1);
)

Et pour l'image, j'ai rajouté ça:

border-style: solid;
border-width: 1px;
padding: 0px;
background-color: transparent;
border-color: #5b5353;


Tant qu'on y est, la dernière grosse modification est celle de l'image de fond, mais je ne pense pas que ça vienne de là:

/* Personnalisation */
/*----------------------------------------------------------------------------*/
body {
background-color: #b9ebdc ! important;
background-image: url("http://img535.imageshack.us/img535/7400/metalbackgroundvert24.jpg") ! important;
background-repeat: no-repeat;
background-position:bottom center;
background-attachment : fixed;
}
Modifié par Cachou82 (04 Sep 2011 - 23:49)

regarde le lien que j'ai mis dans le dernier post.

jmlapam a écrit :
jette un coup d'oeil ici:
http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html




Il y a tout un passage sur IE

J'étais déjà tombée sur ça. Malheureusement, ça dépasse mon niveau de compétence. J'ai quand même essayé de coller ce code en l'adaptant:

<!--[if lte IE 8]>
<style type="text/css">
.ombrage {
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;
}
</style>
<![endif]-->

Mais Overblog (ma plateforme) "avale" les parties en "<>' pour ne garder que les .{}, et celles-là, comme je ne les comprends pas, je n'ai pas su comment les changer... (pardon, je suis une autodidacte débutante en CSS, je modifie quelques codes, en bidouilles d'autres, mais je ne comprends pas les lignes ci-dessus )

a écrit :
Mais Overblog (ma plateforme) "avale" les parties en "<>' pour ne garder que les .{}

Là je capte pas.

jmlapam a écrit :

Là je capte pas.

Je ne sais pas comment l'expliquer... Le CSS d'Overblog ne présente que des codes entre {}, rien entre <>. J'ai rajouté toute la partie indiquée, et tout ce qui est hors .quelquechose{} a été juste supprimé et n'apparaît plus dans la feuille CSS une fois les changements enregistrés (changements qui n'ont rien apporté comme modification qui plus est).

Plus clairement, au lieu d'avoir ça dans le CSS:

<!--[if lte IE 8]>
<style type="text/css">
.ombrage {
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;
}
</style>
<![endif]-->

Je n'avais plus que ça:

.ombrage {
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;
}


Ici, je suis en train de faire les changements étape par étape sur le "vrai" blog, je ne suis pas loin de la feuille finale, je n'ai juste pas encore mis les cadres de l'image et les ombres portées, et tout est normal sur Explorer. Le problème provient donc vraiment de ces ombres portées. Du coup, ce qu'il me faudrait, c'est une ligne de code qui permettrait d'avoir une très très très légère ombre (donnant l'impression de relief donc, comme ici: http://www.lorhkan.com/) avec comme couleurs #e3fcf8 (code CSS)(1 px en x, 1 en y donc). C'est tout. Mais je ne sais pas comment transformer le code ci-dessus (ou n'importe quel autre code que celui qu'on m'a donné) pour avoir ça...
Modifié par Cachou82 (05 Sep 2011 - 00:35)

ah ok, euh si tu dis qu'overblog a une config très spécifique, lance une recherche google ou autre, d'autres ont du rencontrer ton problème.

jmlapam a écrit :
ah ok, euh si tu dis qu'overblog a une config très spécifique, lance une recherche google ou autre, d'autres ont du rencontrer ton problème.

Déjà fait, et non apparemment... (pour ça que je suis venue ici)

Sur OB, on a fini par me donner une solution (ils séchaient sur la question), mais elle ne fonctionne pas.

J'ai rajouté la ligne:

filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=4); zoom: 1;

J'ai changé la couleur en celle que je voulais.

Résultat: rien de visible sur Firefox, et encore un résultat pas très beau sur Explorer. Pfff.


J'ai trouvé cette ligne de code sur la feuille du blog dont l'écriture me plaît, mais je ne sais pas comment l'utiliser:

{textShadow:'1px 1px 1px #000000', hover:true})('h1, h2, h3, h4, h5, h6, span.fn',{textShadow:'1px 1px 1px #fff'}

Ou alors, autre solution: comment faire pour garder mon code initial qui fonctionne bien sur Firefox, Chrome et Opera, tout en rajoutant un code qui annulera son effet sur Explorer? Est-ce qu'un tel code existe?

Solution trouvée par quelqu'un d'OB: retirer la partie "Filter" du code. Et ça marche!!!

Donc si quelqu'un passe ici avec le même problème que moi: garder le code initial, mais sans le mot "filter". Du coup, ombre sur Firefox, rien sur IE (mais pas de déformation, et c'est déjà ça).

On va voir si ça tient...

super, content pour toi

Le tuto d'Alsa stipulait qu'IE comme Opera n'implémentent pas les ombrages CSS3, ceci explique peut-être cela... mais il date de 2010.


Mets un [résolu] à ton sujet comme cela si qqun passe par là, hop il voit la solution.
Modifié par jmlapam (05 Sep 2011 - 09:24)

jmlapam a écrit :
super, content pour toi

Le tuto d'Alsa stipulait qu'IE comme Opera n'implémentent pas les ombrages CSS3, ceci explique peut-être cela...

Bon à savoir, comme ça j'en connais la raison!
(et merci de t'être penché sur mon cas)
Modifié par Cachou82 (05 Sep 2011 - 09:26)