Probleme décalage image sous ie

bonjour,

J'ai un petit problème de mise en forme au niveau de l'image navigation, sous ie j'obtiens un décalage indésirable vers la gauche du bouton navigation a cause de l'image rss que j'ai ajouter alors que sous firefox impeccable.

Comment rendre compatible IE afin de ne pas obtenir un centrage du bouton navi... par rapport au blog.

Merci d'avance de votre aide

Mon site http://www.vmixx.com
Modifié par kitten13 (28 Apr 2007 - 14:46)

Probablement un problème de HasLayout. div#js, ayant une largeur fixe, est doté du layout, et perd sa capacité à se « glisser » sous les flottants. Apparemment, c'est pris en compte pour le centrage vertical...

Cf. Avoir le layout - Le concept de hasLayout dans IE/Win.

Solutions :
- s'arranger pour que div#js n'ait pas le layout (pas de hauteur ou largeur fixe...) ;
- positionner div#badge en absolu, par rapport à un conteneur en relatif (conteneur qu'il faudra probablement créer).
Cf. http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

Pour ma part, j'opterais pour la première solution. J'en profiterais pour remplacer cette affreuse technique de remplacement d'image à coup de text-indent par une image HTML en bonne et due forme, avec attribut alt correctement renseigné, et effet de survol en Javascript, pourquoi pas.
Pour information, une image se centre facilement avec un text-align: center sur son élément parent (ou du moins le premier parent ou ancêtre de type bloc).

Merci pour ton aide florent,

Mais je t'avoue que je suis largué sur ce coup.

J'essaie de comprendre la première technique que tu me conseil et de l'appliquer mais c'est un désastre.

Tu as cette image :
http://www.vmixx.com/wp-content/themes/vmixx/images/toggle.gif

Mettons que tu la sépares en deux images, une pour chaque état. Prenons la première image. C'est une image de contenu portant une information textuelle. En HTML, ça se code ainsi :

<img src="toggle-a.gif" alt="Navigation">

Ensuite, tu rajoutes l'effet de survol en Javascript :

<img src="toggle-a.gif" alt="Navigation" onmouseover="this.src='toggle-b.gif'">

Et tu centres le tout en appliquant un text-align: center au parent (div#js).

Sinon, tu as remarqué que :
- tu as 20 Ko de scripts (42 Ko si le navigateur n'accepte pas les contenus compressés) pour... à vue de nez pas grand chose ;
- si Javascript est désactivé, ta navigation est inaccessible.

Le deuxième point est assez singulier. Pour faire les choses correctement, il faudrait que :
- le fait de cacher le bloc de navigation soit fait en Javascript, au chargement de la page (si Javascript est désactivé, le bloc de navigation est visible) ;
- partant, le bouton pour montrer ou cacher la navigation devrait être généré en Javascript, afin qu'il n'apparaisse pas lorsque Javascript est inactif.

Ah oui, et un machin saisissant :

<div id="badge"  center style="visibility:visible !important; float:right ">

Que vient faire ce center ici ? Est-ce qu'il ne perturberait pas IE, par hasard ?

Merci florent, ca va mieux.

Mais le problème est apparue quand j'ai appliquer l'image rss que tu voi a droite avec se code conseiller par un modo alsac.....

<div id="badge"  style="visibility:visible !important; float:right "><a href="http://vmixx.com/?feed=rss2"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rss_top.png" alt="" border="0" /></a></div>

Sous firefox no souci mais la bete ie ...

Edit: si je retire l'image rss, tout va bien, sinon elle fait décaler le bouton navig... sous ie
Modifié par kitten13 (29 Apr 2007 - 12:41)

kitten13 a écrit :
Edit: si je retire l'image rss, tout va bien, sinon elle fait décaler le bouton navig... sous ie

J'avais bien compris. Mais est-ce qu'une image HTML non dotée de layout (en particulier sans propriétés CSS width ou height est affectée de la même manière ? Je peux me tromper, mais je pense que non.