[Résolu] Problème d'affichage d'images dans un tableau avec Safari

Bonjour,
Je suis ultra-débutant et je récupère un site qui, hélas, reste à être perfectionné (corrigé...). Le plus gros problème : Safari affiche n'importe comment trois images de la page d'accueil. L'adresse du site en question : ici.

Il n'y a aucun problème sous Firefox ou Chrome qui affichent correctement les trois images, c'est à dire la même taille pour les trois, la taille de l'ensemble variant selon la taille de la fenêtre. Chaque image est dans une cellule, les trois cellules sur une ligne d'un tableau. Safari (de manière totalement aléatoire) affiche les trois images avec des tailles complètement différentes pour chacune d'elle (c'est ridicule)...

Et le clou sur le gâteau : en local, safari ouvre très bien le site. Mais dès que je l'ouvre sur l'hébergeur, ça bugue... PIRE : sur un ordi Safari ouvre bien le site MAIS bugue lorsque je réactualise la page (!...) et sur un autre ordi Safari bugue tout le temps...


Voici le html des trois images en question :

<div id="drag1">
<table width="100%"  border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td><a href="livres.html" target="_self"><img src="img/PageAccueil-1.png" alt="1" name="1" width="100%" onmouseover="MM_swapImage('1','','img/PageAccueil-1on.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td><a href="expositions.html" target="_self"><img src="img/PageAccueil-2.png" alt="2" name="2" width="100%" onmouseover="MM_swapImage('2','','img/PageAccueil-2on.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
   <td><a href="galerie.html" target="_self"><img src="img/PageAccueil-3.png" alt="3" name="3" width="100%" onmouseover="MM_swapImage('3','','img/PageAccueil-3on.png',1)" onmouseout="MM_swapImgRestore()" /></a><br />
</td>
  </tr>
</table>
</div>

Et voici le CSS correspondant

#drag1 {
	background-color:#fff;
	font-family: 'arial', sans-serif;
    font-size: 10px;
  	border-left:0px solid #000;
	border-top:0px solid #000;
    margin-bottom:8px;
	margin-left:25%;
	margin-right:2%;
    position: relative;
    width="100%";  
	height: auto;
    z-index:0;
}

Auriez-vous des conseils, des idées?

Merci énormément!
Modifié par Shmoutz (30 Jul 2013 - 13:53)

Bonjour,

dans ton code css commence à corriger :

position: relative;
width="100%"
height: auto;

par :

position: relative;
width:"100%";
height: auto;

et retest !

a écrit :
position: relative;
width:"100%";
height: auto;

Pas de guillemets autour de 100% :

position: relative;
width: 100%;
height: auto;

Euh... Merci pour la suggestion mais elle a des effets secondaires un peu gênant (les images deviennent énormes, dépassant largement de la fenêtre)...