28173 sujets

CSS et mise en forme, CSS3

Leger ecart d'affichage entre IE et Firefox

oye Oye brave gens

Je ne suis pas un grand expert en CSS et j'ai un petit soucis d'ecart lors de l'affichage entre FF et IE
Il est de l'ordre du millimetre ^^ mais je suis trés perfectionniste, je suis aussi certain qu'il s'agit d'un probleme que les habitué conaisse c'est pourquoi je me tourne vers vous....

voici le code que j'utilise:

<div style="background-color:#FFFFFF; background-position: center center ;background-image:url('images/loading.gif') ;background-repeat: no-repeat; width:160px; height:120px;position:relative;" class="cadre_photo">
									<div align="center" style="width:100%;height:100%;" id="boutique_last_10_img">
									</div>
								</div>


grace a mon code javascript, je change l'image dans la div nommée "boutique_last_10_img" et l'image est de width="158" et height="118" avec un border="0"

A la limite l'ecart serait centré... mais la il est sur les coté et ca rend pas terrible


En esperant que vous saurez m'aider ^^

A bientot
Pssin Smiley cligne upload/13401-Sanstitre.jpg
Bonjour,

Et avec un display: block sur l'image?
Voir aussi la FAQ du forum au sujet des espaces indésirables sous les images.
Bonjour et merci pour ta réponse,

Effectivement je n'avais jamais consulté la FAQ, et il y a pas mal de choses interessante, je vais essaye de suivre ton conseil pour le display: block

Pour l'instant, je suis au boulot et j'ai pas trop le temps de tester mais je le erais ce soir et dirais si mon pb est resolu, en attendant si d'autres ont des solutions, je suis preneur ^^
Sans avoir la moindre idée des divers styles CSS qui peuvent s'appliquer à tes éléments, ça sera difficile de te faire une réponse solide.

Il y aurait moyen de voir la page en ligne, ou une page reproduisant le problème?
Mon probleme c'est que admetton que j'ai une div de 160*120
La logique voudrait que si a l'interieur je mette une image de la emm taille que la div,
mon image prenne tous l'espace sans qu'il y ai de blanc ni que la div soit agrandi...

C'est le cas sous Firefox, l'image prend tout l'espace et ne redimensionne pas le conteneur...
par contre sous IE, l'image sort de la div.... c'est pas logique et ca me rend dingo

je te donne le liuen avec htacess en pm Smiley cligne
++
Salut,

Essaye cette piste si j'ai bien compris Smiley biggol 

<style type="text/css">
*{ margin: 0; padding: 0;}
</style>
</head>
<body style="background: #000;">
<div style="background-color:lime; width:160px; height:120px;position:relative;margin-top: 100px; margin-left: 100px;" class="cadre_photo">
	<div style=" width:160px; height:120px; background: yellow;font-size: 1px ">
		<img src="image.jpg" style="width:158px;height:118px; margin: 1px;" />
	</div>
</div>
</body>
Non,
tu as mis une image plus petite (en taille) que la taille de la div.
Ce que j'essaye de faire c'est que la div aient la meme taille que l'image.

Sous FF, l'image prend toute la div et ne redimensionne pas la div mais sous IE, la div est agrandi alors que la div et l'image ont la meme taille...

Smiley sweatdrop
Heu !!

Et là?
<style type="text/css">
*{ margin: 0; padding: 0;}
</style>
</head>
<body>
<div style="background-color:lime; width:160px; height:120px;position:relative;margin: 100px;" class="cadre_photo">
	<div style=" width:160px; height:120px; background: yellow;font-size: 1px ">
		<img src="image.jpg" style="width:160px;height:120px;" />
	</div>
</div>
</body>


Ou alors Ya pas tout compris ... Smiley lol
Bonjour,

Au vu du site (lien envoyé en MP):
- je ne constate pas de problème particulier avec IE6, IE7 ou Firefox2;
- par contre, les pages du site sont rendues en mode Quirks, du fait de l'absence totale de Doctype...
Je ne me suis pas encore attaqué au doctype mais bientot ^^

avec IE7,

regarde attentivement les div pendant le chargement et au moment du changement de l'image, on voit clairement (avec mes yeux de vipere attentif au moindre pett detail) que la div 'bouge' elle est redimensionner... alors que sous firefox tout se passe correctement
Bon

apparament, il suffisait que j'enleve celà : class="cadre_photo"
Il s'agissait en fait, simplement de la bordure de la div qui bouffer de l'espace semble t'il...

voilà le css de cadre_photo
.cadre_photo {
border: 1px solid #333333;
}

Donc pour le coup j'aurais plus la bordure mais ce n'est pas grave car ca ressort bien meme sans la bordure ^^
pssinjaune a écrit :
Je ne me suis pas encore attaqué au doctype mais bientot ^^

Normalement, il faut commencer par travailler avec un Doctype valide. Si on en rajoute un à la fin, on prend des risques, la présence ou l'absence d'un Doctype influant assez fortement (voir radicalement) sur le rendu.
Je ne m'y connais aps du tout en doctype, lequel choisir ? a quoi sert t'il ?
est ce que celà est trés grave s'il n'y en a pas ?
Si cela est si important, autant que je l'integre au plus vite...
Sujet clos
Aller à