Sujet Précédent Sujet Suivant

Tableau avec un espace sans raisons...

louve-bleue -  
Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjours
J'ai un problème sur le menu de mon site web http://www.dudulleries.new.fr/
Sous internet explorer ce tableau marche très bien, mais sous firefox par contre il y a un espace plutôt gênant entre deux colonnes...
J'ai essayée à la place de mettre un tableau dans un tableau d'utiliser la fonction rowspan (essait visible sur les autres page que la page d'acceuil) mais cette foi c'est sous internet explorer qu'il ya a un décalage et sous firefox tout va bien...

Voici mon code : 
<table
 style="margin: 0pt; padding: 0pt; text-align: left; border-collapse: collapse; font-family: Blackadder ITC;"
 margin="0" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: left; vertical-align: top;">
      <table
 style="padding: 0pt; margin-top: 0pt; margin-bottom: 0pt; text-align: left;"
 margin="0" border="0" cellpadding="0"
 cellspacing="0">
        <tbody>
          <tr>
            <td style="vertical-align: top;" colspan="2">
            <a href="index.html"><img
 style="width: 355px; height: 160px;" alt="DUDULLERIES.new.fr"
 src="img/dudullerie.png"
 onmouseout="this.src='img/dudullerie.png'"
 onmouseover="this.src='img/dudullerie2.png'" border="0"></a></td>
          </tr>
          <tr>
            <td style="text-align: left; vertical-align: top;"><img
 style="width: 148px; height: 68px;" alt=""
 src="img/du1.png"><br>
            <img
 style="border: 0px solid ; width: 22px; height: 75px;" alt=""
 src="img/du2.png"><a href="dudulle.html"><img
 style="" alt="Dudulle?" src="img/dudulle.png"
 onmouseout="this.src='img/dudulle.png'"
 onmouseover="this.src='img/dudulle2.png'" border="0"></a><img
 style="border: 0px solid ; width: 24px; height: 75px;" alt=""
 src="img/du3.png"><br>
            <img style="width: 148px; height: 33px;" alt=""
 src="img/du4.png"></td>
            <td style="text-align: left; vertical-align: top;"><img
 style="width: 207px; height: 9px;" alt=""
 src="img/re1.png"><br>
            <img
 style="border: 0px solid ; width: 33px; height: 70px;" alt=""
 src="img/re2.png"><a href="recopiage.html"><img
 style="" alt="Recopiage" src="img/recopiage.png"
 onmouseout="this.src='img/recopiage.png'"
 onmouseover="this.src='img/recopiage2.png'" border="0"></a><img
 style="border: 0px solid ; width: 47px; height: 70px;" alt=""
 src="img/re3.png"><br>
            <img style="width: 207px; height: 74px;" alt=""
 src="img/re4.png"></td>
          </tr>
        </tbody>
      </table>
      </td>
      <td style="text-align: left; vertical-align: top;">
      <table style="text-align: left;" padding=""
 margin="0" border="0" cellpadding="0"
 cellspacing="0">
        <tbody>
          <tr>
            <td
 style="text-align: left; vertical-align: top; height: 285px; width: 213px;"><img
 style="width: 200px; height: 113px;" alt=""
 src="img/cr1.png"><br>
            <img style="width: 15px; height: 69px;" alt=""
 src="img/cr2.png"><a href="crayonnage.html"><img
 style="border: 0px solid ;" alt="Crayonnage"
 src="img/crayonnage.png"
 onmouseout="this.src='img/crayonnage.png'"
 onmouseover="this.src='img/crayonnage2.png'"></a><img
 style="width: 27px; height: 69px;" alt=""
 src="img/cr3.png"><br>
            <img style="width: 200px; height: 150px;" alt=""
 src="img/cr4.png"> </td>
            <td style="text-align: left; vertical-align: top;">
            <table style="text-align: left;" margin="0"
 border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td style="text-align: left; vertical-align: top;"><img
 style="border: 0px solid ; width: 76px; height: 38px;" alt=""
 src="img/li1.png"><a href="liens.html"><img
 style="border: 0px solid ;" alt="Liens"
 src="img/liens.png" onmouseout="this.src='img/liens.png'"
 onmouseover="this.src='img/liens2.png'" border="0"></a><a
 href="liens.html"><img
 style="border: 0px solid ; width: 59px; height: 38px;" alt=""
 src="img/li2.png"></a><br>
                  <img style="width: 198px; height: 18px;"
 alt="" src="img/li3.png"></td>
                </tr>
                <tr>
                  <td style="text-align: left; vertical-align: top;"><img
 style="width: 198px; height: 11px;" alt=""
 src="img/fi1.png" align="top"><br>
                  <img style="width: 33px; height: 71px;"
 alt="" src="img/fi2.png" align="top"><a
 href="lesfinits.html"><img
 style="border: 0px solid ; width: 130px; height: 71px;"
 alt="Les finits" src="img/lesfinits.png"
 onmouseout="this.src='img/lesfinits.png'"
 onmouseover="this.src='img/lesfinits2.png'" align="top"></a><img
 style="width: 35px; height: 71px;" alt=""
 src="img/fi3.png" align="top"><br>
                  <img style="width: 198px; height: 164px;"
 alt="" src="img/fi4.png"></td>
                </tr>
              </tbody>
            </table>
            </td>
            <td
 style="text-align: left; vertical-align: top; height: 285px;"><img
 style="width: 225px; height: 34px;" alt=""
 src="img/ar1.png"><br>
            <img style="width: 27px; height: 70px;" alt=""
 src="img/ar2.png"><a href="mesarchives.html"><img
 style="" alt="Mes archives" src="img/mesarchives.png"
 onmouseout="this.src='img/mesarchives.png'"
 onmouseover="this.src='img/mesarchives2.png'" border="0"></a><img
 style="width: 23px; height: 70px;" alt=""
 src="img/ar3.png"><br>
            <img style="width: 225px; height: 200px;" alt=""
 src="img/ar4.png"></td>
            <td
 style="text-align: left; vertical-align: top; height: 285px;"><img
 style="width: 160px; height: 7px;" alt=""
 src="img/bd1.png"><br>
            <img style="width: 17px; height: 71px;" alt=""
 src="img/bd2.png"><a href="mesbd.html"><img
 style="" alt="Mes BD" src="img/mesbd.png"
 onmouseout="this.src='img/mesbd.png'"
 onmouseover="this.src='img/mesbd2.png'" border="0"></a><img
 style="border: 0px solid ; width: 18px; height: 71px;" alt=""
 src="img/bd3.png"><br>
            <img style="width: 160px; height: 188px;" alt=""
 src="img/bd4.png"> </td>
            <td
 style="text-align: left; vertical-align: top; height: 285px;"><img
 style="" alt="" src="img/fin.png" border="0"></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>


Quelqu'un peut il m'aider?
A voir également:

2 réponses

Réponse 1 / 2
Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
 
salut,

elle est où exactement ta marge fantôme ?
et avec quelle version de IE ?

excellente idée le survol des images qui fait ressortir le trait.
0
louve-bleue
 
La marge est entre la cellule de "crayonnage" et celle de "les finis" avec Firefox 2.0.0.14 et dans le cas ou j'utilise la fonction rowspan la marge est entre 'liens" et "les finis" avec internet explorer mais quelle versoin... hé bien j'ai pas réussit à trouver ou c'était marqué... mais elle est très récente.
0
Réponse 2 / 2
Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
 
voila ce que je vois :
• FF
• IE6
• IE7

hormis le problème de rendu des PNG sous IE6, rien ne me choque !
0
louve-bleue
 
oulala oui les png ont u un sacré problème quelqu'un en connait la raison?
en fait la page d'accueil bug sous mozilla firefox
et les autre pages sous mon internet explorer (dont je n'arrive pas a trouver le numéro...)
0
Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923 > louve-bleue
 
salut,

les png ont u un sacré problème quelqu'un en connait la raison?
elle est toute simple, IE6 ne gère pas correctement la transparence du format PNG.
donc soit tu produit des PNG avec un fond opaque, soit tu les convertis en GIF.
il y a aussi un Javascript qui permet à IE6 de gérer cette transparence mais les deux premières solutions me paraissent plus simples et surtout plus logiques, à voir selon tes besoins !

la page d'accueil bug sous mozilla firefox et les autre pages sous mon internet explorer
il faut en premier travailler pour FF et ensuite adapter pour IE.
il faut éviter d'utiliser le {padding} avec des tailles fixes pour la même boite et utiliser au maximum le comportement naturel de rendu : être prudent avec {float} et éviter au maximum {position:relative;} et {position:absolute;} qui sont plus difficile à appréhender au départ.

commence par mettre en page les principaux éléments (bannière, contenu, pied de page) en testant à chaque fois avec les différents navigateurs puis ajouter les éléments plus complexes comme les menus toujours en testant à chaque fois comme ça tu sauras ce qui ne fonctionne pas au fur et à mesure.

mon internet explorer (dont je n'arrive pas a trouver le numéro...)
menu "?" puis "A propos d'Internet Explorer…"

pour avoir IE 6 & 7 en même temps et sous d'autres navigateurs (installes en particulier Opéra qui a très bon rendu).
0

Discussions similaires

Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses