[Résolu] Ie ... évidement !

bonjour a tous,
j'ai un probleme de mise en forme avec ie7 (au moins... faudra que je controle ie6 aussi ...)
j'ai donc des onglets accueil, catalogue, news, team, etc... avec une image survolée a chacun pour changer la couleur
et sur l'onglet catalogue,en plus, j'ai un onmousever qui m'affiche en dessous les sous produits
voici donc mes codes pour afficher des onglets:

    <table><tr><td>
<a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('accueil','','images/images_site/accueil2.png',1)"><img src="images/images_site/accueil1.png" title="Accueil" name="accueil"   border="0"></a></td>
<td>
		<dt onmouseover="javascript:montre2('smenu1');" >
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('catalogue','','images/images_site/catalogue2.png',1)"><img src="images/images_site/catalogue.png" title="catalogue" name="catalogue"   border="0"></a>
<div id="survol">
			<dd id="smenu1" onmouseover="javascript:montre2('smenu1');" onmouseout="javascript:montre2();"> 
					<a href="catalogue2.php?num=66" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('onglet-cadre','','images/images_site/onglet-cadre2.png',1)"><img src="images/images_site/onglet-cadre.png" title="les cadres" name="onglet-cadre"   border="0"></a>
					<a href="catalogue2.php?num=66" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('onglet-potence','','images/images_site/onglet-potence2.png',1)"><img src="images/images_site/onglet-potence.png" title="les potences" name="onglet-potence"   border="0"></a>
					</dd></dt></div>
</td>
<td><a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','images/images_site/news2.png',1)">
		<img src="images/images_site/news.png" title="news" name="news"  border="0"></a></td>
<td><a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('team','','images/images_site/team2.png',1)">
		<img src="images/images_site/team.png" title="team" name="team"  border="0"></a>
		</div>
  </td></tr></table>

le css (y'en a d'autres mais je vais mettre que le principal, le "survol") :

#survol { position: absolute; margin:0 0 0 -120px; padding: 0px; display: block;}

alors voila, ça fonctionne bien sur firefox, mais pas sur ie, l'image survolée du catalogue affiche les sousproduits et decale en hauteur les liens accueil, news, team
si quelqu'un voit le bazar, moi, je cale...
merci bien d'avance pour votre coup de main
Modifié par zugolin (05 Nov 2008 - 09:56)

en complement, voici en image ce que me donne firefox (les 2 onglets s'affichent bien en dessous de catalogue)


et voici l'erreur de ie7 (decalage des liens a coté)

Une fois n'est pas coutume : pourrais tu nous mettre un peu plus de ton css , il faudrait pouvoir jeter un oeuil au css du menu complet.

merci a toi, vola d'autres css

body {  width:100%; background:url(../images/lefond.jpg) ; background-color:transparent;background-attachment:fixed;  }

#conteneur { width:1000px; margin:0 auto 0 auto; }

#bandeau { background-image:url(../images/images_site/logo_glace2.png);
              background-repeat:no-repeat; width:1000px; height:150px; }

#menu { float:left; /*background-image:url(../images/images_site/barre_gauche.png);
	background-repeat:no-repeat; */width:160px; height:600px; text-align:center;}
 /*background="../images/fond6.jpg" style="background-repeat:repeat-y ;border: collapse*/

#survol { position: absolute; margin:0 0 0 -120px; padding: 0px; display: block;}

bon, on est dans le #body, ensuite, on est aussi dans le #conteneur, mais apres, c'est tout, le #bandeau est avant et le #menu est apres

est-ce que ça pourrait pas etre a cause de mes images qui sont dans des <td> ?
(je veux pas afficher tous les codes car c'est encore le bazar ...hummm)
Modifié par zugolin (04 Nov 2008 - 13:51)

Essai ça :

td{
    vertical-align:top;
}

Modifié par cahnory (04 Nov 2008 - 13:56)

de cette façon, je n'ai plus de décalage de hauteur sur les liens a coté, mais ça les ecarte, et ça me decale vers le bas les textes qui viennent en dessous

Essai comme ça :

<table>
<tr>
    <td>
        <a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('accueil','','images/images_site/accueil2.png',1)">
            <img src="images/images_site/accueil1.png" title="Accueil" name="accueil"   border="0">
        </a>
    </td>
    <td>
        <dt onmouseover="javascript:montre2('smenu1');" >
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('catalogue','','images/images_site/catalogue2.png',1)">
                <img src="images/images_site/catalogue.png" title="catalogue" name="catalogue"   border="0">
            </a>
        </dt>
    </td>
    <td>
        <a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','images/images_site/news2.png',1)">
            <img src="images/images_site/news.png" title="news" name="news"  border="0">
        </a>
    </td>
    <td>
        <a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('team','','images/images_site/team2.png',1)">
          <img src="images/images_site/team.png" title="team" name="team"  border="0">
        </a>
    </td>
</tr>
<tr>
    <td colspan="4" align="center">
        <div id="survol">
            <dd id="smenu1" onmouseover="javascript:montre2('smenu1');" onmouseout="javascript:montre2();"> 
                <a href="catalogue2.php?num=66" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('onglet-cadre','','images/images_site/onglet-cadre2.png',1)">
                    <img src="images/images_site/onglet-cadre.png" title="les cadres" name="onglet-cadre"   border="0">
                </a>
                <a href="catalogue2.php?num=66" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('onglet-potence','','images/images_site/onglet-potence2.png',1)">
                    <img src="images/images_site/onglet-potence.png" title="les potences" name="onglet-potence"   border="0">
                </a>
            </dd>
        </div>
    </td>
    </tr>
</table>

Mais bon utiliser un tableau pour faire un menu est loin d'être la bonne solution, et poster des rollover javascript ici risque de t'attirer des coups de rêgles en bois sur les doigts
Modifié par cahnory (04 Nov 2008 - 15:20)

cahnory a écrit :
Mais bon utiliser un tableau pour faire un menu est loin d'être la bonne solution ...

+1. J'ajouterai aussi une mauvais utilisation des "balises de définition"

cahnory a écrit :
... et poster des rollover javascript ici risque de t'attirer des coups de rêgles en bois sur les doigts

Pas forcément, si cela est pertinent (et fait dans les "règles de l'art").

YES!
merci cahnory
le coup de mettre les onglets dans d'autres <td> est bon !!
j'ai plus qu'a trouver pourquoi il ne prend pas mon margin: -120px a gauche (sur ie7), mais c'est moins dramatique
je peux continuer tranquillou !!

merci a tous!

Pour le margin, tu veux atteindre quel effet avec ?

je voulais arriver plus a gauche et ça s'est fait tout seul, vu que j'ai rajouté des onglets, donc, c'est bon!

N'oublis pas de marquer le sujet comme [RÉSOLU]