28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

j'ai fait tout ce que j'ai pu mais je n'arrivais pas à asseoir cette image qui flotte sous IE. Pourtant sous Firefox tout est normal.

voici le lien

Plus précisement l'image est affichée à l'aide d'un BBCode...
<!-- BEGIN img --><img src="{URL}" BORDER=0 class='photo'><!-- END img -->
<!-- BEGIN imgl --><img src="{URL}" STYLE="float:left" BORDER="0" class='photo' /><!-- END imgl -->
<!-- BEGIN imgr --><img src="{URL}" STYLE="float:right" BORDER="0" class='photo' /><!-- END imgr -->
<!-- BEGIN imgc --><div align="center"><img src="{URL}" BORDER="0" class='photo' /></div><!-- END imgc -->

Le style correspondant à la photo est la suivante:
.photo {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; MARGIN-BOTTOM: 1px; PADDING-BOTTOM: 3px; MARGIN-LEFT: 3px; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 3px; PADDING-TOP: 3px; POSITION: relative; 
}


Merci de votre aide.
Modifié par cowboy (19 May 2006 - 17:29)
salut

en commencant par modifier ce qui devrais l'être :

BORDER=0 : à supprimer et à mettre dans un css.

align="center" : pas bon non plus

je te rappelle que tu est en strict...

<?xml version="1.0" encoding="iso-8859-1"?>


c'est ce qui ne plait pas à ie, à supprimer.l'ajout du prologue fait passer ie en mode quirck.

à optimiser :

.photo {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; MARGIN-BOTTOM: 1px; PADDING-BOTTOM: 3px; MARGIN-LEFT: 3px; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 3px; PADDING-TOP: 3px; POSITION: relative; 
}


comme çà :

.photo {
POSITION: relative; 
PADDING: 3px;
MARGIN: 1px 3px 1px;
VERTICAL-ALIGN: middle;
}

Modifié par keran (19 May 2006 - 20:18)
Merci pour ton conseil,

j'ai réglé le problème en éliminant position: relative dans .photo Smiley biggrin

et aussi quelques bidouilles pour IE...