28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis tout nouveau sur ce forum et grand débutant dans le monde du CSS...

Alors j'essaye de réaliser une petite carte géolocalisé en utilisant du CSS.
J'ai réussi à faire ce que je souhaitais sous Firefox mais sous IE, il reste un petit bug que je n'arrive pas à trouver....
Les points que je fais apparaitre sur ma carte ne sont pas à la même hauteur! (voir le point qui se trouve au Suriname(en vert))
Voici une copie d'écran sur FireFox et sous IE (cliquer sur l'image pour mieux voir...):
upload/9042-Bug2.jpg

Vous pourrez trouver le code source (simplifié) ici: Code source

La page réelle se trouve ici: Carte Geolocalisé

Merci pour votre aide et désolé par avance si le bug était tout bête...
Modifié par guilichou (19 Oct 2006 - 20:07)
Bonjour,

Je suppose que tes points sont en absolute et si c'est le cas c'est malheureusement normal !! IE n'interprete pas de la même manière,
Il ne te reste alors qu'à lui refaire un positionnement pour lui ...
du style


html>body .ta_class  {
   top: yypx;
   left: xxpx
}
Effectivement j'utilise l'absolute pour le positionnement. Par contre je ne vois pas comment indiquer à IE de prendre un autre couple de coordonnées...
Voici ce que j'ai pour l'instant:
 a.pointBrasilia
{
	position: absolute; 
	/* Position du point */
	top: 323px; /* 276 + 47*/ 
	left: 436px; /* 382 + 54*/ 
	width: 8px; height: 8px; /* Taille du rond - on affiche que lui */
	z-index: 10; display: block; 
	font-size: 1px;
	background-color: transparent; 
	background-image: url(PointBrasilia.gif); /* image que l'on veut afficher */
	background-position: 0px 0px; 
	background-repeat: no-repeat;
}
a.pointBrasilia:hover 
{ 
	width: 81px; /* largeur */
	height: 37px; /* hauteur */
	background-position: 0px -8px; /* Permet de faire disparaitre le rond */
	z-index: 50;
}

que j'appel de cette facon:
<a class="pointBrasilia" href="#" target="_blank">&nbsp;</a>


Je ne sais pas où et quoi modifier pour que IE prenne des nouvelles coordonnees si c'est la seule solution...
Modifié par guilichou (19 Oct 2006 - 18:21)
RE,

Essayes ça,




 a.pointBrasilia 

{

	position: absolute; 

	/* Position du point */

	top: 323px; /* 276 + 47 valeur pour IE*/

	left: 436px; /* 382 + 54 valeur pour IE*/ 

	width: 8px; height: 8px; /* Taille du rond - on affiche que lui */

	z-index: 10; display: block; 

	font-size: 1px;

	background-color: transparent; 

	background-image: url(PointBrasilia.gif); /* image que l'on veut afficher */

	background-position: 0px 0px; 

	background-repeat: no-repeat;

}
html>body a.pointBrasilia   {

   top: yypx;/*valeur pour FF*/

   left: xxpx;/*valeur pour FF  nb : IE ne "sait pas lire ce type de balise et l'ignore pas FF*/

}


<edit> jete un oeil là http://www.gardannecallas.com/plan.php </edit>
Modifié par ghost (19 Oct 2006 - 19:05)