28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde !

bon voila mon soucis:
Comme indiqué dans le titre, je suis dans un cas un peu particulier où je dois utiliser une image PNG transparente en tant que background-image d'un tableau. Ce tableau contenant par la suite lui même des images servant de liens.

Jusque là, aucun problème sous Firefox et IE7.

Afin d'assurer la compatibilité avec IE5,IE6... j'ai donc rajouté un petit hack qui fait ceci :
<!--[if lt IE 7]>

<style type="text/css">

.catal_fondtab {
    
     background-image:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/catal_fond.png', sizingMethod='scale');

	background-repeat:no-repeat;

}
</style>


Niveau apparance, pas de soucis ça roule sous IE6. Le soucis vient du fait qu'avec le hack l'image qui est censé être en arrière plan m'empeche d'accéder aux liens contenus dans mon tableau Smiley bawling

Voici le code du tableau en question, si ça peut aider :
          <table width="175" border="0" align="center" cellpadding="0" cellspacing="0" class="catal_fondtab">
            <tr>
              <td height="17"><img src="images/spacer.gif" width="1" height="17" /></td>
              <td width="1" height="17"><img src="images/spacer.gif" width="1" height="17" /></td>
            </tr>
            <tr>
              <td style="padding-left:50px;"><a href="#"><img src="images/catal_labels_r1_c3.gif" width="101" height="65" border="0" id="Image13" onmouseover="MM_swapImage('Image13','','images/catal_labels_r1_c3_roll.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td align="center"><img src="images/catal_labels_r3_c4.gif" width="41" height="11" /></td>
              <td><img src="images/spacer.gif" width="1" height="13" /></td>
            </tr>
            <tr>
              <td style="padding-left:25px;"><a href="#"><img src="images/catal_labels_r5_c2.gif" width="122" height="44" border="0" id="Image14" onmouseover="MM_swapImage('Image14','','images/catal_labels_r5_c2_roll.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td align="center"><img src="images/catal_labels_r3_c4.gif" width="41" height="11" /></td>
              <td><img src="images/spacer.gif" width="1" height="13" /></td>
            </tr>
            <tr>
              <td style="padding-left:16px;"><a href="#"><img src="images/catal_labels_r7_c1.gif" width="145" height="45" border="0" id="Image15" onmouseover="MM_swapImage('Image15','','images/catal_labels_r7_c1_roll.gif',1)" onmouseout="MM_swapImgRestore()" /></a></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="1" height="22" /></td>
              <td><img src="images/spacer.gif" width="1" height="22" /></td>
            </tr>
          </table>


Voili voilou, si certains d'entre vous ont une idée... j'suis preneur !! Smiley lol

Merciiiiii
Ca marche ?! Jsui pas convaincu que ça soit si simple. A mon avis soit faut jouer avec les z-index, soit sauf déclarer les cellule en position relative et les a en position absolute.