Bonjour,

Après avoir fait le tour du net et du forum pour trouver le pourquoi du comment.
je viens poser ici ma question, qui semblera anodine mais qui me fait...ch Smiley fache .

J'ai une bête ancre presque en bas de page qui pointe sur une Div.
Jusque là tout va bien, sous IE pas de problême dans le "scroll" vers cette ancre IE la positionne en haut de la fenêtre, ce qui rend le debut du contenu de la Div visble,, mais voilà le hic..sous FF celui-ci positionne l'ancre en bas de fenêtre. ce qui à pour effet de rendre le contenu de la Div non-visible et oblige à scroller vers le bas de la page.

Cela ne le fait que parceque cette ancre se trouve proche du bas de page.
Je cherche une solution sans faire un hack I.E en css
Merci D'avance Smiley smile
Modifié par Gwenadu (05 Nov 2008 - 18:21)
la page n'est pas en ligne

voilà, le code de la page,mais je pencherai après analyse d'un defaut de FF....pour une fois

mais toute astuce sera la bienvenue Smiley smile

<div id="formulaire">
<a name="contact" id="contact"></a>
<form class="formulaire" action="contact.php"
 method="post" onsubmit="return valideForm()">
  <h2>Formulaire de contact </h2>
  <table>
    <tbody>
      <tr>
        <th class="note" colspan="2">Les
champs
obligatoires sont
pr&eacute;c&eacute;d&eacute;s d'une &eacute;toile (*). </th>
      </tr>
      <tr>
        <td class="info">Nom : </td>
        <td class="champ-ob">*<input name="nom"
 size="50" type="text" /></td>
      </tr>
      <tr>
        <td class="info">Soci&eacute;t&eacute;
: </td>
        <td class="champ"> <input name="societe"
 size="50" type="text" /></td>
      </tr>
      <tr>
        <td class="info">Email : </td>
        <td class="champ-ob">*<input name="email"
 size="30" type="text" /></td>
      </tr>
      <tr>
        <td class="info">Email (confirmation): </td>
        <td class="champ-ob">*<input name="email2"
 size="30" type="text" /></td>
      </tr>
      <tr>
        <td class="info">T&eacute;l&eacute;phone: </td>
        <td class="champ"> <input name="telephone"
 size="15" type="text" /></td>
      </tr>
      <tr>
        <td class="sujet">Le motif de
votre
message *</td>
        <td class="liste"> <input name="sujet"
 value="renseignement" type="radio" /> Renseignement<br />
        <input name="sujet" value="probl&egrave;me technique"
 type="radio" /> Probl&egrave;me
technique<br />
        <input name="sujet" value="partenariat ?"
 type="radio" /> Partenariat ? </td>
      </tr>
      <tr>
        <td class="contenu">Votre message</td>
        <td class="contenant"><textarea name="texte"
 cols="50" rows="8"></textarea></td>
      </tr>
      <tr id="nepasimprimer">
        <td></td>
        <td class="boutons"><input value="Annuler"
 type="reset" /> <input value="Envoyer"
 type="submit" /></td>
      </tr>
    </tbody>
  </table>
</form>
</div>
<a class="up" href="#haut">Retour haut de page</a>
</div>
</div>
<div id="pied">
<div id="navmap">
<ul>
  <li><a id="active" href="index.html">Accueil</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="actualites.html">Actualit&eacute;es</a></li>
  <li><a href="documentation.html">Documentation</a></li>
  <li><a href="apropos.html">A propos</a></li>
</ul>
</div>
<p><a href="http://www.crystone.fr">Copyright
&copy; 2008 CryStone Tous
droits
r&eacute;serv&eacute;s.
</a></p>
<a href="http://validator.w3.org/check?uri=referer"><img
 style="border: 0px solid ; width: 60px; height: 21px;"
 src="images/valid-xhtml11-black.gif" class="valid"
 alt="Valid XHTML 1.0 Strict" /></a><a
 href="http://jigsaw.w3.org/css-validator/"><img
 src="images/vcss.gif" class="valid" alt="CSS Valide !" /></a></div>
</body>
</html>
Oups, cela n'est bien sur pas la page entiere, mais seulement le bas de la page à partir de l'ancre... Smiley lol
Salut Heyoan,

j'ai parcouru la FAQ et d'autres sites et forum.
Je connais le fonctionnement des ancres. D'habitude pas de problême, ça marche nickel.....mais là....
revoici le code de la page en entier

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <meta http-equiv="Content-Type"
 content="text/html;charset=utf-8" />
  <meta name="author" content="" />
  <title>Lorem Ipsum</title>
  <link rel="stylesheet" type="text/css"
 href="css/AVent.css" />
  <script type="text/javascript"
 src="js/verification_formulaire.js"></script>
</head>
<body>
<a name="haut"></a>
<div id="wrapper">
<div id="contenair">
<div id="entete"><a id="logo"> </a>
<div id="menu">
<ul>
  <li><a id="current" href="index.html">Accueil</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="actualites.html">Actualit&eacute;es</a></li>
  <li><a href="documentation.html">Documentation</a></li>
  <li><a href="index.html#contact">Contact</a></li>
  <li><a href="apropos.html">A propos</a></li>
</ul>
</div>
</div>
<div id="entetelist">
<div id="entetelistgauche">
<ul>
  <li>
    <p>Expertise Comptable</p>
  </li>
  <li>
    <p>Conseils Economique et Financiers</p>
  </li>
  <li>
    <p>Fiscalit&eacute;</p>
  </li>
  <li>
    <p>Juridique</p>
  </li>
</ul>
</div>
<div id="entetelistdroite">
<ul>
  <li>
    <p>Gestion de la paie</p>
  </li>
  <li>
    <p>Gestion du personnel</p>
  </li>
  <li>
    <p>gestion du patrimoine</p>
  </li>
  <li>
    <p>Formation</p>
  </li>
</ul>
</div>
</div>
<div id="main">
<div id="subMain">
<h2>Des prestations sur mesure</h2>
<p><img style="width: 200px; height: 142px;"
 class="image" alt="Des prestations sur mesure"
 src="images/deco10.jpg" /></p>
<ul>
  <li>
    <p>Artisans</p>
  </li>
  <li>
    <p>Agriculteurs</p>
  </li>
  <li>
    <p>Commer&ccedil;ants</p>
  </li>
  <li>
    <p>PME - PMI</p>
  </li>
  <li>
    <p>Professions lib&eacute;rales</p>
  </li>
  <li>
    <p>Particuliers</p>
  </li>
  <li>
    <p>Associations</p>
  </li>
</ul>
<p>Parceque votre entreprise est unique, AVENIR ENTREPRISES met
&agrave; votre disposition un interlocuteur
privil&eacute;gi&eacute;, qui g&egrave;re l'ensemble des
actions de nos experts.</p>
<p>Dans un environnement social, fiscal, &eacute;conomique et
r&egrave;glementaire en constante &eacute;volution, nous avons
d&eacute;velopp&eacute;, et continuons &agrave; le faire,
des prestations d'expertise et de conseils, compl&eacute;mentaires
&agrave; notre m&eacute;tier, pour anticiper et &ecirc;tre
pr&eacute;sent demain.</p>
</div>
<h2>Une expertise reconnue</h2>
<p>AVENIR ENTREPRISES &nbsp;accompagne les entrepreneurs<br />
et contribue au d&eacute;veloppement de leur entreprise quels que
soient leur secteur d'activit&eacute; et leur taille.</p>
<p>Cr&eacute;&eacute; par et pour des chefs d'entrepises,
notre cabinet de conseils vise &agrave; la r&eacute;ussite de
votre entreprise.</p>
<p>Anim&eacute; par cette exigence AVENIR ENTREPRISES
s'engage &agrave; vos cot&eacute;s au cours des
diff&eacute;rentes &eacute;tapes de la vie de votre entreprise
en toute ind&eacute;pendance.</p>
<h2>Des exigences partag&eacute;es</h2>
<p>Si l'efficacit&eacute; est une exigence, la
proximit&eacute; et la disponibilit&eacute; animent depuis
toujours l'action d'AVENIR ENTREPRISES aupr&egrave;s de ses clients.</p>
<p>Ind&eacute;pendants, nos experts ont acquis un
savoir-faire bas&eacute; sur l'&eacute;coute, la
r&eacute;activit&eacute;, et un suivi au plus proche des
demandes de nos clients.</p>
<p>Si le d&eacute;veloppement des hommes et la
r&eacute;ussite de l'entreprise sont au coeur de vos motivations,
AVENIR ENTREPRISES saura vous accompagner dans un partenariat proche et
efficace.</p>
</div>
<br />
<div id="formulaire">
<a name="contact" id="contact"></a>
<form class="formulaire" action="contact.php"
 method="post" onsubmit="return valideForm()">
  <h2>Formulaire de contact </h2>
  <table>
    <tbody>
      <tr>
        <th class="note" colspan="2">Les
champs
obligatoires sont
pr&eacute;c&eacute;d&eacute;s d'une &eacute;toile (*). </th>
      </tr>
      <tr>
        <td class="info">Nom : </td>
        <td class="champ-ob">*<input name="nom"
 size="50" type="text" /></td>
      </tr>
      <tr>
        <td class="info">Soci&eacute;t&eacute;
: </td>
        <td class="champ"> <input name="societe"
 size="50" type="text" /></td>
      </tr>
      <tr>
        <td class="info">Email : </td>
        <td class="champ-ob">*<input name="email"
 size="30" type="text" /></td>
      </tr>
      <tr>
        <td class="info">Email (confirmation): </td>
        <td class="champ-ob">*<input name="email2"
 size="30" type="text" /></td>
      </tr>
      <tr>
        <td class="info">T&eacute;l&eacute;phone: </td>
        <td class="champ"> <input name="telephone"
 size="15" type="text" /></td>
      </tr>
      <tr>
        <td class="sujet">Le motif de
votre
message *</td>
        <td class="liste"> <input name="sujet"
 value="renseignement" type="radio" /> Renseignement<br />
        <input name="sujet" value="probl&egrave;me technique"
 type="radio" /> Probl&egrave;me
technique<br />
        <input name="sujet" value="partenariat ?"
 type="radio" /> Partenariat ? </td>
      </tr>
      <tr>
        <td class="contenu">Votre message</td>
        <td class="contenant"><textarea name="texte"
 cols="50" rows="8"></textarea></td>
      </tr>
      <tr id="nepasimprimer">
        <td></td>
        <td class="boutons"><input value="Annuler"
 type="reset" /> <input value="Envoyer"
 type="submit" /></td>
      </tr>
    </tbody>
  </table>
</form>
</div>
<a class="up" href="#haut">Retour haut de page</a>
</div>
</div>
<div id="pied">
<div id="navmap">
<ul>
  <li><a id="active" href="index.html">Accueil</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="actualites.html">Actualit&eacute;es</a></li>
  <li><a href="documentation.html">Documentation</a></li>
  <li><a href="apropos.html">A propos</a></li>
</ul>
</div>
<p><a href="http://www.crystone.fr">Copyright
&copy; 2008 CryStone Tous
droits
r&eacute;serv&eacute;s.
</a></p>
<a href="http://validator.w3.org/check?uri=referer"><img
 style="border: 0px solid ; width: 60px; height: 21px;"
 src="images/valid-xhtml11-black.gif" class="valid"
 alt="Valid XHTML 1.0 Strict" /></a><a
 href="http://jigsaw.w3.org/css-validator/"><img
 src="images/vcss.gif" class="valid" alt="CSS Valide !" /></a></div>
</body>
</html>

Modifié par Gwenadu (05 Nov 2008 - 17:24)
Je n'ai pas dit que tu ne connaissais pas les ancres mais il n'empêche que ta notation risque de ne pas être reconnue par certains navigateurs. Smiley cligne

Cela étant dit en l'état ton code fonctionne sur Firefox... peut-être une fonction Javascript qui gênerait le bon fonctionnement : à tout hasard as-tu essayé en désactivant le JS ?
Désolé, si ma reponse ta semblé "brutale", ce n'etait pas mon intention Smiley ravi
Oui ma notation est simpliste, mais je l'ai reduite pour faire des tests
ce code aurait été mieux

<a href"#contact" name="contact" id="contact></a>

Oui, j'ai essayé en desactivant le js, mais idem... Smiley decu
Je n'ai aucune extension ou plugin dans FF, il est brute de pomme et pour une fois que c'est lui qui réagi mal

je vais creuser la question, un padding ou margin du css qui decale la div seulement dans FF?

Merci en tout cas d'avoir pris le temps de regarder,considerons le sujet clos
Gwenadu a écrit :
Désolé, si ma reponse ta semblé "brutale", ce n'etait pas mon intention Smiley ravi
Pas de problème. Smiley smile

Par contre je pensais que tu parlais du lien "Retour en haut de page"... mais bon : le lien contact fonctionne également. Smiley hmm

Le mieux serait de mettre une page de test en ligne mais si tu souhaites tout de même fermer ton sujet, merci d'éditer ton premier message et de modifier le titre en rajoutant [résolu] (ou [abandonné] si tu préfères). Smiley cligne
oui, autant clore le sujet, de toute façon ce n'est pas non plus un problême "monstrueux" et qui empêche le fonctionnement du site en question.

merci encore Smiley smile