[Résolu] Problème chrome position absolute / background-position

Bonjour,

j'ai actuellement un petit problème de rendu dans les navigateurs chrome et safari (pc mais je pense que mac c'est pareil).
J'ai fait, en bas de mes pages un lien "retour haut de page" avec une petite flèche dont voici le code html (rien de bien compliqué) :

<div class="gototop"> 
<a href="/page.php?url=dokumente#top"> Zum Seitenanfang </a>  
</div>

J'ai stylisé ce lien avec du css pour qu'il me l'affiche en bas à droite de mes pages, avec une petite flèche en fond à droite :

/* gototoplien */
	div.gototop{
	position:absolute;
	bottom:5px;
	margin-left:500px;
	margin-bottom:10px;
	}
		.gototop a{
		background-image:url(../interface/public/backtop.png) ;
		background-repeat:no-repeat;
		background-position: bottom right;
		padding-right:30px;
		}

Le padding right sert ici à laisser suffisamment de place à droite de mon lien, pour afficher l'image. Celà fonctionne très bien sous firefox, IE et opera, mais j'ai un décalage sous Chrome et Safari. On dirait que ces deux navigateurs prennent en compte le padding, mais me collent l'image sous la fin de mon texte. Voici un screen du rendu :



J'ai identifié la source du problème (plus ou moins), c'est le fait de mettre ma div en position absolute. Si j'enlève la position absolute, plus de souci, le lien se comporte bien sous chrome et safari. Le problème est que je veux que ce lien soit en bas de page, quelque soit la longueur de la page, d'où l'utilisation du position absolute.

Quelqu'un aurait-il une idée, soit pour placer la div en bas de page sans position absolute, soit pour régler mon décalage sous chrome et safari ?

Merci à vous
Modifié par saiko_sama (18 Jun 2010 - 13:25)

bonjour,

as tu esayé en jouant sur l'affichage
avec un reflow par exemple : .gototop a {position:relative;}

ou en modifiant le contexte de formatage :
.gototop a {float:left; /* ou : display:inline-block; par exemple */ }

autre solution , affiché la marge interne et l'image dans le conteneur parent : div.gototop .

N'ayant pas de mac sous la main , je ne peut voir le defaut ni verifier l'une ou l'autre de ces 'suppositions' .

GC

Merciii

le .gototop a {float:left;} fonctionne, du coup c'est rentré dans l'ordre en rajoutant ceci dans le code, même si j'avoue ne pas trop comprendre pourquoi.

ps : je change le titre initial du post, pas assez de place pour y ajouter le ^^
Modifié par saiko_sama (18 Jun 2010 - 13:25)