Probléme de positionnement

[doomer2]

Voici mon probleme. Je veux en haut à droite de l'écran cette barre de leins qui permet aux visiteurs handicapes ou non de passer directement au contenu. Le probleme est que cette barre est bien colle au bord de la page sous IE mais sous mozilla elle se trouve plus bas soit peut 10px en dessous.

Mon source est dans le fichier htm :

<div id="toc">

 	 <ul>
      <li><a href="#contenu" accesskey="k" title="Le contenu. Key : k">aller au contenu</a></li>
      <li><a href="#menu" accesskey="l" title="Navigation du site. Key : l">aller au menu</a></li>
      <li><a href="#recherche" accesskey="s" title="Rechercher dans le site. Key : s">rechercher</a></li>
      <li><a href="#pieddepage" accesskey="0" title="Informations sur le site. Key : 9">info legales</a></li>
    </ul>
  </div>

dans le fichier css :

#toc{
 text-align: right;
 color:#000000;
 margin-left:700px;
 position:absolute;
 width:auto;
 top:0;
 padding:0px;
}


#toc a{
 display: inline; 
 font-size: 60%;
 color:#000000;
}

#toc a:hover{
 display: inline;
 font-size: 60%;
 background-color: #FFCC33;
 color:#ffffff;
}

#toc li{
 padding: 0 5px;
 border-left: 1px solid #ccc;
}

#toc ul li{
 display: inline;
 list-style-type: none;
}

A l'aide svp !!!

[LaurentDenis]

Sans chercher plus avant, as-tu démarré ta feuille de style en annulant les marges et remplissage créé par défaut par les navigateurs, chacun à leur manière, y compris sur les éléments html et body ?

html, body {

margin: 0;

padding: 0;

}

ou

* {

margin: 0;

padding: 0;

}

[LaurentDenis]

En fait, on ne peut pas s'empêcher d'y regarder d'un peu plus près :

<div id="toc">

  	<ul>
      <li><a href="#contenu" accesskey="k" title="Le contenu. Key : k">aller au contenu</a></li>
      <li><a href="#menu" accesskey="l" title="Navigation du site. Key : l">aller au menu</a></li>
      <li><a href="#recherche" accesskey="s" title="Rechercher dans le site. Key : s">rechercher</a></li>
      <li><a href="#pieddepage" accesskey="0" title="Informations sur le site. Key : 9">info legales</a></li>
    </ul>
  </div>

les acceskeys sous forme de lettres sont actuellement abandonnés au profit d'une liste limitée d'accesskeys numériques, en raison des problèmes d'accessibilité qu'ils créent au lieu d'en résoudre. Voir http://openweb.eu.org/articles/accesskey_e...non_transforme/

dans le fichier css :

#toc{

...

margin-left:700px;

position:absolute;

...

top:0;

...

}

Cette position absolue est-elle nécessaire ? Si ton menu d'accessibilité est, comme logiquement, en tête de contenu, elle est inutile et te complique la vie pour rien.

Le margin-left de 700px est un peu surprenant. Une marge de 700px, c'est presque la largeur d'un "petit" écran (800x600) ?

#toc a{

display: inline;

...

}

Les éléments <a> sont déjà des éléments en-ligne par nature. Cette propriété est inutile.

#toc a:hover{

display: inline;

}

re-belote. De toute façon, une propriété définie pour xxx s'applique par héritage à xxx:hover. Inutile de la répéter.

Aurais-tu l'url d'une page de test ?

[Perrine]

Bonjour doomer2

J'ai rencontré le même problème avec Opera. C'était parce que j'avais juste mentionné le margin de mon body mais pas le padding.

- body {margin:0;}

FF et IE ne mettent pas de marge, mais Opera oui

- body {margin:0; padding;0}

FF, IE et Opera ne mettent aucune marge