28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ombre d'image

Bonjour,

J'ai suivi le tutoriel du site "A list apart" concernant les ombres : "CSS Drop Shadows II: Fuzzy Shadows"

Voici le lien :

http://www.alistapart.com/articles/cssdrop2

Dans le tuto, il est proposé de positionner les images sur le côté gauche en faisant un float:left;

J'ai voulu positionner l'image sur le côté droit donc j'ai un peu modifié le css :


.alpha-shadow
{
	background: url(shadow.gif) no-repeat bottom right;
	margin: 14px 0 0 17px !important;
	margin: 14px 0 0 8px;
	clear: both;
	[#red]float:right;[/#]
}

.alpha-shadow div
{
	background: url(shadow2.png) no-repeat left top !important;
	background: url(shadow2.gif) no-repeat left top;
	padding: 0px 6px 6px 0px;
	[#red]float: right;[/#]
}

.alpha-shadow img
{
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
  margin: 0;
}


Voici le résultat !

C'est parfait sur Firefox et IE8 mais sur IE7, voilà ce que ça donne :

upload/18771-chat2.jpg

Comment faire pour corriger ce bug d'IE7 ?

Merci beaucoup !
Modifié par remus69 (05 May 2009 - 17:07)
Salut,

remus69 a écrit :
C'est parfait sur Firefox et IE8
Ben... non ! Le rendu est le même que dans IE7. Smiley murf

Pourquoi ne pas tout simplement laisser le deuxième float (.alpha-shadow div) en left ?
Ok! Merci de vos réponses.

Donc à part considérer que tout mes internautes ont IE8 ou Firefox, il n'y a aucune solution?
remus69 a écrit :
il n'y a aucune solution?

Comme dit dans mon précédent message: éviter ce cas de figure. Voir la réponse de Heyoan (déjà testé?).
Modérateur
Florent V. a écrit :
Bonjour,

Le bug: http://covertprestige.info/test/20-bug-flottants-imbriques-et-largeur.html

Le correctif: aucun à ma connaissance. Il faut éviter ce cas de figure.


Bonjour,
:) , sauf si l'on n'hesite pas a harceler , matraquer de regles css les endormies de la classe pour les garder éveiller.

Je me permet de proposé une correction de ces bugs dans cette page :
http://gcyrillus.free.fr/trucs_css/20-bug-flottants-imbriques-et-largeur.html

Autant que cela est simple pour FF2 et IE6 , ou il ne s'agit que d'une piqure de rappel pour l'un et pour l'autre de mettre a notre avantage l'implémentation du width , que pour IE7 , le rappel se doit d'être plus profond en sortant la panoplie quasi compléte du "wild haslayout " ....

Ces bugs corrigés , sur une page exemple , ne sont pas forcément une solution pour IE7 , car , forcer le comportement d'affichage a tendance a rendre le reste d'une page instable , en particulier si ces corrections interviennent presque en fin de mise en page / intégration ....

Enfin bon , le plus simple , c'est toujours ne pas s'empêtrer dans les bugs déjà connus Smiley smile ...

GC
Hello,

Bravo pour la multi-astuce. Je me garderai bien de l'utiliser vu tous les problèmes de maintenance que ça peut induire, et les effets secondaires possibles des propriétés utilisées (effets normaux non voulus, effets anormaux inattendus), mais c'est un rappel intéressant.
Modérateur
:) oui en effet , ne pas trop jouer avec le feu


En validant une page , je m'aperçois que ma façon de voir le flottant est peut-etre erroné:
validateur W3C a écrit :

In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected


IE serait donc dans le vrai a laissé un flottant s'étendre sur toute la largeur disponible dés qu'il contient un element de type 'block' ... (découverte troublante ou amusante, selon ...)
Sujet clos
Aller à