Tableau sous firefox

22 mai 2006, 21:10

voila, je compte faire un tableau sans bordure ni espace, chaque cellule contenant une image. (mon code est en php mais comme je pense que l'erreur est html je poste ici)

Code : Tout sélectionner

<table border=0 cellspacing="0" cellpadding="0">
<?
$nb=1;
while ($nb<10)
{
	$nb2=1;
	echo "<tr>";
	while ($nb2<10) 
	{
	echo "<td><img src=\"./images/plaine.gif\"></td>";
	$nb2++;
	}
	echo "</tr>";
	$nb++;	
}
?>
</table>

Sous internet explorer le résultat est bon, mais sous firefox, peut importe ce que je rentre dans les ballises, il persiste toujour un espace sous chaque image.

22 mai 2006, 21:18

essaye avec:

Code : Tout sélectionner

<img src=\"./images/plaine.gif\" style=\"margin:0px;\">

22 mai 2006, 22:18

sans effet malheuresement

22 mai 2006, 22:36

Utilise un style CSS à la place:
transofrme la partie html comme ceci dans un premier temps:

<table summary="">
<?php
$nb = 1;
while ($nb < 10)
{
    $nb2 = 1;
    echo "  <tr>\n";
    while ($nb2<10)
    {
        echo "    <td><img src=\"./images/plaine.gif\"></td>\n";
        $nb2++;
    }
    echo "  </tr>\n";
    $nb++;   
}
?>
</table>

Pour le css, ajoute ceci dans l'entête (head)

Code : Tout sélectionner

<style type="text/css">
table {
    border-collapse: collapse;
}
td {
    margin: 0;
    padding: 0;
}
td img {
    margin: 0;
}
</style>

22 mai 2006, 22:55

Voila ce que j'obtiens sous firefox:

23 mai 2006, 07:33

Fais afficher la source HTML générée pour voir ce qui cloche par rapoprt à ce que tu veux obtenir.

23 mai 2006, 11:46

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Genesis: La naissance d'un monde</title>
       <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" >
	   <link rel="stylesheet" media="screen" type="text/css" href="css/defaut.css" >
   </head>
<body>
	<div id="en_tete">
	</div>

	<div id="menu">
	<ul>
		<li>Lien 1</li>
		<li>Lien 2</li>
		<li>Lien 3</li>
	</ul>
	</div><table summary="">

  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>
  <tr>
    <td><img src="./images/plaine.gif"></td>

    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
    <td><img src="./images/plaine.gif"></td>
  </tr>

</table>

Code : Tout sélectionner

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("../images/fond.gif");
}

#en_tete
{
   width: 760px;
   height: 120px;
   background-image: url("../images/banniere.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#menu
{
   float: left;
   width: 150px;
   background-color: red;
}

table {
    border-collapse: collapse;
}
td {
    margin: 0;
    padding: 0;
}
td img {
    margin: 0;
}

23 mai 2006, 12:25

C'est apparemment ton <!DOCTYPE qui pose problème...

23 mai 2006, 12:41

C'est apparemment ton <!DOCTYPE qui pose problème...

Non c'est juste du strict donc c normal que ça ne marche pas.
Tu essais d'appliquer des propriétés de block à un élément inline (margin)
Rajoute display:block; à ton image pour qu'il prennent en compte la marge nulle.

23 mai 2006, 12:48

Merci, mais finalement je vais oublier le strict, désolé du dérangement

Tableau sous firefox

Qui est en ligne