28172 sujets

CSS et mise en forme, CSS3

Differences entre ie et ff pour le placement d'images

Bonjour à tous,

J'ai un "léger" problème sur mon site.
Je voudrais mettre des images les une en dessous des autres. Jusque la pas de soucis. Le truc c'est que certaines images doivent déborder sur d'autres.
J'ai donc utilisé les "margin-top" et "margin-bottom" avec des valeurs négatives afin d'arriver au résultat souhaité. Mais lorsque je regarde sous ie, la ca ne va plus du tout.

Le code de ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link href="./restricted/css/alpha.css" rel="stylesheet" type="text/css" />

    </head>
  <body>


<div id="pve">
<img src="./public/images/pve_title.png" alt="tableau de chasse" /><br />
<div id="HighWarlordNajEntus">&nbsp;</div><!-- fin HighWarlordNajEntus --><br />
<div id="Azgalor">&nbsp;</div><!-- fin Azgalor --><br />
<div id="Kazrogal">&nbsp;</div><!-- fin Kazrogal --><br />
<div id="Anatheron">&nbsp;</div><!-- fin Anatheron --><br />
<div id="RageWinterchill">&nbsp;</div><!-- fin RageWinterchill --><br />
<div id="Solarian">&nbsp;</div><!-- fin Solarian --><br />
<div id="VoidReaver">&nbsp;</div><!-- fin VoidReaver --><br />
<div id="Alar">&nbsp;</div><!-- fin Alar --><br />
<div id="Morogrim">&nbsp;</div><!-- fin Morogrim --><br />
<div id="Karathress">&nbsp;</div><!-- fin Karathress --><br />
<div id="Leotheras">&nbsp;</div><!-- fin Leotheras --><br />
<div id="Lurker">&nbsp;</div><!-- fin Lurker --><br />
<div id="Hydross">&nbsp;</div><!-- fin Hydross --><br />
<div id="ZulAman">&nbsp;</div><!-- fin ZulAman --><br />
<div id="Maghtéridon">&nbsp;</div><!-- fin Maghtéridon --><br />

<div id="Gruul">&nbsp;</div><!-- fin Gruul --><br />
<div id="Karazhan">&nbsp;</div><!-- fin Karazhan --><br />
<br />
</div><!-- fin pve -->
  </body>
</html>


et le code de ma feuille de style:


html {
  background: #000000;
  text-align: center;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-size: 100%;
  height: 100%;
}
body {
  background: #300000 url('http://legendesoubliees.nuxit.net/public/images/background.png');
  background-repeat : no-repeat;
  background-position : top center;
  font: normal 80%/1em "Arial", Verdana, Courier New, sans-serif;
  margin: 0px;
  padding: 0px;
  border: 0px;
  min-height: 100%;
  min-width: 1200px;
  text-align: center;
}
img {
  border: none;
}

#pve {
  line-height: 0em;
  padding: 0px;
  margin: 0px
  border: 0px;
}

#Karazhan {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_karazhan.png') no-repeat;
  background-position : top center;
  margin-top: -18px;
  width: 240px;
  height: 75px;
}
#Gruul {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_gruul.png') no-repeat;
  background-position : top center;
  margin-bottom: -15px;
  margin-top: -12px;
  width: 240px;
  height: 82px;
}
#Magthéridon {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_magthe.png') no-repeat;
  background-position : top center;
  margin-left: 14px;
  margin-bottom: -23px;
  margin-top: -36px;
  width: 240px;
  height: 114px;
}
#ZulAman {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_zulaman.png') no-repeat;
  background-position : top center;
  margin-top: -12px;
  width: 240px;
  height: 67px;
}
#Hydross {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_hydross.png') no-repeat;
  background-position : top center;
  margin-left: 2px;
  margin-bottom: -28px;
  margin-top: -27px;
  width: 240px;
  height: 110px;
}
#Lurker {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_lurker.png') no-repeat;
  background-position : top center;
  margin-left: -10px;
  margin-top: -23px;
  width: 240px;
  height: 81px;
}
#Leotheras {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_leo.png') no-repeat;
  background-position : top center;
  margin-top: -38px;
  width: 240px;
  height: 95px;
}
#Karathress {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_karath.png') no-repeat;
  background-position : top center;
  margin-left: -13px;
  margin-bottom: -46px;
  margin-top: -39px;
  width: 240px;
  height: 140px;
}
#Morogrim {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_morogrim.png') no-repeat;
  background-position : top center;
  margin-left: 11px;
  margin-top: -20px;
  width: 240px;
  height: 81px;
}
#Alar {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_alar.png') no-repeat;
  background-position : top center;
  margin-left: -14px;
  margin-bottom: -30px;
  margin-top: 9px;
  width: 240px;
  height: 76px;
}
#VoidReaver {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_void.png') no-repeat;
  background-position : top center;
  margin-left: 10px;
  margin-bottom: -19px;
  margin-top: -28px;
  width: 240px;
  height: 102px;
}
#Solarian {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_solarian.png') no-repeat;
  background-position : top center;
  margin-top: -25px;
  width: 240px;
  height: 82px;
}
#RageWinterchill {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_rage.png') no-repeat;
  background-position : top center;
  margin-left: 15px;
  margin-bottom: -26px;
  margin-top: -36px;
  width: 240px;
  height: 117px;
}
#Anatheron {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_ana.png') no-repeat;
  background-position : top center;
  margin-left: -14px;
  margin-bottom: -28px;
  margin-top: -40px;
  width: 240px;
  height: 103px;
}
#Kazrogal {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_kazrogal.png') no-repeat;
  background-position : top center;
  margin-left: 15px;
  margin-top: -45px;
  width: 240px;
  height: 121px;
}
#Azgalor {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_azga.png') no-repeat;
  background-position : top center;
  margin-left: -14px;
  margin-bottom: -15px;
  margin-top: -29px;
  width: 240px;
  height: 99px;
}
#HighWarlordNajEntus {
  position: relative;
  padding: 0px;
  border: 0px;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/pve_najen.png') no-repeat;
  background-position : top center;
  margin-left: 9px;
  margin-bottom: -27px;
  margin-top: -12px;
  width: 240px;
  height: 133px;
}


Si vous pouviez m'aidez à comprendre mes erreurs Smiley smile

En vous remerciant par avance.
Personne n'aurait un début d'explications pour m'aider ?
Dois je utiliser une feuille de style juste pour ie ?
Personnellement je débute un site et pour le rende compatible avec IE 6 et IE 7 j'utilise 3 feuilles de style : une de base qui est pour mozilla et sert aussi à IE6 et une pour IE6 que seul IE6 comprend et une IE7 que seul IE7 comprend.
Voilà ma démarche
dans ton fichier HTML, tu mets :
<!--[if IE]>
<link rel="stylesheet" href=".../css/css_ie6.css" type="text/css" />
<link rel="stylesheet" href=".../css/css_ie7.css" type="text/css" />
<![endif]-->

ensuite ton CSS pour IE6 doit être comme ceci :
* html div.class {
/margin:13px 0px 10px 1px; /* le slash avant la propriété est très important ! */
}
ou
* html div#id {
/margin:13px 0px 10px 1px; /* le slash avant la propriété est très important ! */
}

ensuite ton CSS pour IE7 doit être comme ceci :
* +html div.class {
/width:415px; /* j'ai remarqué une différence de width entre IE7 et firefox 500px sur firefox = 415 sur IE7 Smiley confus */
}
ou
* +html div#id {
/width:415px;
}

Voilà pour moi ça marche ! bon courage,
EDIT : oups j'ai lu trop rapidement ton post, ton problème concerne les images... je suis à la recherche du placement des images, incorrect sur IE7... j'espère t'avoir aider quand meme !!!!
Modifié par poupouille1406 (04 Aug 2008 - 15:26)
poupouille1406 a écrit :
* html div.class {
/margin:13px 0px 10px 1px; /* le slash avant la propriété est très important ! */
}
ou
* html div#id {
/margin:13px 0px 10px 1px; /* le slash avant la propriété est très important ! */
}

Je ne comprends pas l'interet du slash dans cette feuille de style destinée à IE, tout comme je ne comprends pas la présence de * html Smiley confus
Merci de ton aide, mais l'utilisation de feuilles spécifiques en fonction du navigateur est une solution que j'aimerai utiliser qu'en dernier recours.
N'y a t il pas d'explications pour cette différence entre ie et ff ? J'ai un peu de mal à comprendre comment la distance entre les images peut être différentes après avoir spécifiés les différentes balises comme je l'ai fait :'(
Poupouille > Si tu utilise des feuille de style particulières pour IE déjà dans le commentaire conditionnel, il serait préférable (dans ton cas de figure) de préciser la version; et il est inutile d'utiliser des hack (que je ne reconnais pas)
pas besoin de préciser la version puisque les hacks ne marchent QUE pour IE6 ou QUE pour IE7 !
tu ne les reconnait peut etre pas mais pourtant ils marchent je peux te l'assures !
un exemple tout con et inutile mais je peux mettre à un div un fond vert pour firefox, jaune pour IE6 et rouge pour IE7 avec ces hacks !!!
Administrateur
poupouille1406> la bonne méthode pour les commentaires conditionnels est d'une de prévoir l'arrivée d'IE8 (il lui faudra les mêmes instructions CSS qu'aux autres navigateurs respectueux des standards que sont Safari 3, Opera 9.x et Fx3, enfin espérons Smiley sweatdrop ) et de deux de supprimer tout hack puisque les CC les remplacent justement.
Quelque chose comme:
<!--[if lte IE 6]><link rel="stylesheet" href="styles6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="styles7.css" type="text/css" media="screen" /><![endif]-->


Pour revenir au sujet, utsuho je n'ai pas eu le temps de tester ta page en local mais est-ce que tu obtiens le même résultat Fx/IE si tu déclares le div#pve en position: relative; ? Ça va évidemment tout fiche en l'air mais l'important est que ce soit identique sur les 2 navigateurs Smiley cligne Ou bien si tu supprimes text-align: center; et vertical-align: middle; de la règle concernant body edit: html plutôt?
Modifié par Felipe (05 Aug 2008 - 09:32)
Bonsoir,

Désolé de ne pas avoir rep plus tôt, je n'en ai pas eu l'occasion.

J'ai essayé en mettant "position:relative;" au div#pve sans effet. J'ai ensuite enlevé le "text-align: center; vertical-align: middle;" dans body et html toujours sans succés. J'ai essayé de faire les 2 modifications, l'une apres l'autre, etc, sans succès non plus. J'ai toujours le même décalage entre ff et ie7 ( je n'ai pas testé sur ie6 ) Smiley sweatdrop
Bonjour utsuho,

Première question qui me vient à l'esprit :
C'est pourquoi donc est-ce faire ?
Les images sont-elles purement décoratives ou sont-elles porteuses d'une information d'importance ? (auquel cas elles devraient se trouver directement dans le code html)

Tu pourrais peut-être te pencher sur les niveau d'empliment (propriété z-index ) et positionner ces images en position absolue ?

Cdt,
Sylvain
Pour continuer dans la digression sur les commentaires conditionnels, voici ma méthode perso: j'utilise un fichier iefixes.css qui, comme son nom l'indique, contient uniquement des correctifs CSS pour Internet Explorer. Je l'appelle avec un commentaire conditionnel visant IE 7 et inférieurs, donc en pratique les versions 6 et 7 (la 5 étant mourue ou presque... si on voulait faire preuve de rafinement il faudrait utiliser un appel de la feuille de styles avec un @import, en utilisant une syntaxe standard comprise par IE6 et 7 mais pas par IE5 ou 5.5).

Donc côté HTML ça ressemble souvent à ceci:
<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" media="screen" href="styles/iefixes.css" />
<![ endif ]-->
(sans espaces autour du mot «endif»).

Ensuite, dans cette feuille de styles, j'utilise le mécanisme suivant:
- les correctifs qui s'adressent aux deux versions (IE 6 et 7) utilisent des sélecteurs CSS normaux;
- les correctifs qui s'adressent à IE6 uniquement utilisent le Star HTML Hack, c'est-à-dire la syntaxe * html mon sélecteur {};
- les correctifs qui s'adressent à IE7 uniquement utilisent un sélecteur d'enfant, typiquement sous la forme html > body mon sélecteur {}.

Les avantages de cette méthode:
- la portée des hacks est maitrisée, car on sait très précisément à quels versions du navigateur on s'adresse;
- on évite de jongler entre deux fichiers, et de dupliquer certains correctifs;
- on économise un appel serveur.

Le dernier point n'est à mes yeux pas le plus important. C'est surtout la possibilité de regrouper les correctifs qui m'intéresse. Par contre cela demande un peu de rigueur pour ne pas s'embrouiller avec les différents sélecteurs. C'est pourquoi je commente assez largement mes correctifs, en indiquant souvent pour quelle version ils sont utiles et ce qu'ils font.

poupouille1406 a écrit :
/width:415px; /* j'ai remarqué une différence de width entre IE7 et firefox 500px sur firefox = 415 sur IE7 Smiley confus */

Et ce n'est pas un problème classique de box model?
Je suppose que ta page HTML a un Doctype en bonne et due forme, n'utilise pas de prologue XML (bug IE6), et passe comme un charme au validateur HTML?
Ce code doit me servir pour le site de ma guilde world of warcraft. Chaque image indique un boss qu'on a réussi à tuer. J'ai voulu faire un petit truc dynamique. Je m'explique, on a un post sur le forum qui indique si un boss est tombé ou pas ( son nom est écrit soit en vert soit en rouge ). S'il est écrit en vert, l'image correspondante doit s'afficher, sinon non Smiley biggrin
C'est donc à la fois décoratif ( j'aurai juste pu mettre du texte ) et informatif.
J'avoue, c'est se compliquer la vie pour pas grand chose mais j'aimerai tout de même comprendre pquoi les 2 navigateurs réagisse de façons différentes sur ce point.
Pour ceux qui ont regardés les images, il s'agit d'une "bulle" avec l'image du boss et son nom dessus. Il se peut que l'image du boss dépasse de la bulle, soit par le haut, soit par le bas, d'ou l'utilisation des "margin-bottom: -XX px; margin-top: -XX px;". En théorie chaque image devrait donc être collé au niveau de ces différentes bulles ( j'ai tout de même laissé un espace entre chaque bulle mais le principe reste le même ). Pquoi donc un comportement différent ?

Je vais essayer de voir du coté des positions absolue.
Merci de votre aide Smiley cligne
Sujet clos
Aller à