28173 sujets

CSS et mise en forme, CSS3

Décalage des top et left avec position : absolute dans Firefox

Bonjour,

Je vous résume rapidement mon problème car je n'ai pas mes créations qui se trouvent au boulot mais j'ai un soucis avec mes div qui contiennent juste les styles "position : absolute" avec un top et un left : sur IE, mon positionnement est nickel ; par contre quand je passe sur Firefox , il y a un décalage vers le bas et vers la droite par rapport à IE...du coup ma présentation ne va plus car tout est calé au pixel près....Connaissez-vous une astuce pour éviter ce problème ???

Si vous avez besoin de voir le problème, je vous enverrai mon code lundi mais j'ai constaté ce problème à chaque fois que j'utilise des div...

Merci !! Smiley biggrin
louloute8091 a écrit :
mes div qui contiennent juste les styles "position : absolute" avec un top et un left

Voilà la première cause du problème : abus de positionnement absolu.
louloute8091 a écrit :
tout est calé au pixel près

Voilà la deuxième cause du problème : volonté illusoire de tout caler au pixel près.

Pour le détail de pourquoi ça marche pas pareil, il faudrait voir avec les codes (dans l'idéal : une page de test en ligne).
Ok voici le code (par contre, je ne peux pas montrer une version en ligne car c'est confidentiel)

html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bannière</title>

<meta name="description" content="">
<meta name="keywords" content="">

<script >

function processChange(select)	{
select.form.action = select.options[select.selectedIndex].value;
}

</script>

</head>
<body>

<table  width="180" height="150" cellspacing="0" cellpadding="0"  border="1" bordercolor="#ffffff" background="Affil_fond_orange.gif" style="background-position:center center;">
<tr><td>


<div style="position:absolute; top:30px; left: 15px;border:none;"><img src="image1.gif"  ></div>
<div style="position:absolute; top:22px; left: 143px;border:none;"><a href="#"target="_blank"><img src="logo.gif" alt="Logo" style="border:none;"></a></div>


<div style="position:absolute; top:76px; left: 45px;"><form name="formulaire" method="post" action="" target="_blank">

<select name="menu" id="choix" size="1" style="font-family: Arial, Helvetica, sans-serif; font-size:11; font-weight:bold; color:#303847;">
<<option>Rechercher</option>
<option value="#">choix1</option>
<option value="#">choix2</option>
<option value="">choix3</option>
<option value="#">choix4</option>
<option value="#">Voir tout</option>
</select>

<div style="position:absolute; top:24px; left: 48px;"><input name="bouton" type="image" alt ="OK" src ="ok.gif" onClick="processChange(this.form['choix'])"></div>

</form>
</div>


<div style="position:absolute; top:115px; left: 15px;"><img src="image2.gif"  style="border:none;"></div>




</td>
</tr>
</table>


</body>
</html>


Voilà !! merci !! je ne maitrise pas encore très bien les CSS donc il y a sûrement un meilleur moyen d'ajuster mes éléments...je suis à l'écoute !!

Smiley biggrin
louloute8091 a écrit :
par contre, je ne peux pas montrer une version en ligne car c'est confidentiel

Par contre je ne peux pas travailler sans version en ligne car je suis flemmard. Smiley cligne

Plus sérieusement, un travail confidential ça peut s'anonymiser. Je sais, ça demande un peu de travail en amont, mais la page en ligne est vraiment le meilleur moyen d'obtenir de l'aide (ça et un code clair et lisible Smiley smile ), donc ça peut valoir ce petit effort.


Deux remarques cependant sur le code source fourni :
- Tu n'as pas de Doctype pour ta page ? Grave erreur à corriger. Bien lire cet article :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir
- Tu n'as pas de feuille de style (interne ou externe) ? Tous tes styles CSS sont directement appliqués aux éléments HTML via l'attribut style. Mauvaise idée également (on perd le principal avantage des CSS).
Sujet clos
Aller à