[Résolu]Petit décallage sous IE, je suis en déroute....

Bonjour, cela fait déjà un bout de temps que je parcours Alsacréations et il m'arrive aujourd'hui un problème.

Je viens donc vous demander de l'aide.

c'est un problème d'affichage sous IE... et j'ai bien cherché mais ça vient pas.
Sous Firefox:
http://uplofile.free.fr/rep5/27464251firefoxpt.png
Sous IE7:
http://uplofile.free.fr/rep5/8012188internetpt.png

Auriez-vous une petite idée? Merci d'avance, bonne soirée.


Si ca peut aider, j'ai ce problème depuis que j'ai rajouter les petites images dans la barre de navigation (home_menu_header.png, contact_menu_header.png, tchat_menu_header.png, liens_menu_header.png):

<ul class="navbar">
<li class="current"><a href="/?p=accueil">
<img style="border: 0px none ; margin-top: 7px; float: left; width: 16px; height: 16px;" src="/views/img/home_menu_header.png" alt="home">
<b>&nbsp;Accueil</b></a></li>
<li class=""><a href="/?p=forum"><b>Forums</b></a></li>
<li class=""><a href="/?p=contact">
<img style="border: 0px none ; margin-top: 7px; float: left; width: 16px; height: 16px;" src="/views/img/contact_menu_header.png" alt="contact">
<b>&nbsp;Contact</b></a></li>
<li class=""><a href="?p=tchat">
<img style="border: 0px none ; margin-top: 8px; float: left; width: 16px; height: 16px;" src="/views/img/tchat_menu_header.png" alt="tchat">
<b>&nbsp;Tchat</b></a></li>

<li class=""><a href="?p=liens">
<img style="border: 0px none ; margin-top: 7px; float: left; width: 16px; height: 16px;" src="/views/img/liens_menu_header.png" alt="liens">
<b>&nbsp;Liens</b></a></li>
</ul>

Et mon css:

.navbar {margin:0; list-style:none; height:30px; padding-left:530px;padding-top:169px;}
.navbar li {float:left; background:url(/views/img/navbar1.gif);}
.navbar li a {display:block; float:left; height:30px; line-height:29px; background:url(/views/img/navbar0.gif) no-repeat; color:#ddd; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 15px; cursor:pointer;}
.navbar li a b {float:left; display:block; padding:0 15px 0 0; background:url(/views/img/navbar0.gif) right top; color:#ddd;}
.navbar li.current a {color:#fff; background:url(/views/img/navbar2.gif);}
.navbar li.current a b {background:url(/views/img/navbar2.gif) right top; color:#fff;}
.navbar li a:hover {color:#fff; background:url(/views/img/navbar1.gif);}
.navbar li a:hover b {background:url(/views/img/navbar1.gif) right top; color:#fff;}
.navbar li.current a:hover {color:#fff; background:url(/views/img/navbar2.gif); cursor:default;}
.navbar li.current a:hover b {background:url(/views/img/navbar2.gif) right top; color:#fff;}

J'ai testé avec un div pour rajouter mes petites images home_menu_header.png, contact_menu_header.png, tchat_menu_header.png, liens_menu_header.png en background avec le css.
Cela fonctionnait mais le W3C ne voulait plus valider ma page comme il faut, il me trouvait une petite erreur.
Modifié par The fire (29 Apr 2009 - 16:53)

Indique un DOCTYPE Strict : http://www.w3schools.com/tags/tag_doctype.asp

@+

laruiss a écrit :
Indique un DOCTYPE Strict : http://www.w3schools.com/tags/tag_doctype.asp

Le doctype transitionnal est tout aussi correct (et n'est pas sencé posé problème), par contre la ligne vide avant peut déclancher le mode quirks sur IE6 ce qui peux causer des problème.

Bonjour, merci de vos réponses.

Tout d'abord:

@laruiss: J'ai tester avec un DOCTYPE xhtml 1.0 strict, cela n'a rien changer .

@Laurie-Anne: J'ai enlever la ligne avant le DOCTYPE, ceci n'a rien changé .

Que faire?

Merci d'vances de vos réponses!

Hello The fire et bienvenue,

tu pourrais utiliser le positionnement absolu sur l'élément UL ce qui permettrait entre autres d'éviter qu'il déborde du conteneur en cas d'agrandissement de la taille de police (si le zoom n'est pas homothétique) ou tout simplement si la taille par défaut choisie par le visiteur est trop grande.

Pour cela :

#header { position: relative }

.navbar {
   ...
   padding: 0;
   position: absolute;
   bottom: 7px;
   right: 57px;
}

PS : pourquoi utiliser une class et pas un id pour navbar ?


Edit: quelques remarques en passant...
* lire gérer la taille du texte avec les « em »
* ta hiérarchie de titres n'est pas bonne : tu commences par des H3 et tu finis par un H2
Modifié par Heyoan (29 Apr 2009 - 13:26)

Merci bien de votre réponse rapide.

Je note les remarques, j'en prendrais compte dès que j'aurais régler ce petit problème.

Pour mon problème:

pour la "class", j'ai remplacer par un "id" pour "navbar"
J'ai appliqué ce que vous m'avez dit à ma feuille de style mais cela n'a pas l'air de fonctionner.


Au pire, j'ai une idée pour régler ce problème mais la page sera un peu plus lourde a chargée.

The fire a écrit :
J'ai appliqué ce que vous m'avez dit à ma feuille de style mais cela n'a pas l'air de fonctionner.

Tu n'as pas remis le padding à 0.

Ohhhh, honte à moi

Un gros merci Heyoan parce que cela fait plusieurs jours que je cherche ce petit problème et que je ne trouvais pas.

Problème résolu, je me charge de hiéarchiser mes titres comme il faut et de ne pas utiliser de font-size px .