Probleme de div sous firefox

Question

bloodee

25 Feb 2006 à 17:11

Bonjour,
je viens de refaire mon site comme j'ai pu^^ mais j'ai un probleme a un endroit sous Firefox (ca fonctionne sous IE)...tout fonctionne bien, sauf la partie "commentaires"...
Voyez par vous meme ca sera plus simple Smiley cligne

==> http://bloodee.free.fr/site_v2/
(cliquez sur Ajouter un commentaire, ca saute aux yeux lol)

Mon code php :

<?php
include ("compteur-live/compteur-live.php");
?>
<html>
<head>
  <title>..:: Et Pan ! ::..</title>
<link rel="SHORTCUT ICON" href="favicon.ico">

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <style type="text/css">
td img { display: block;
}
a:link
{
color: black;
text-decoration: none;
}
a:visited
{
color: black;
text-decoration: none;
}
a:hover, a:active
{
color: red;
text-decoration: none;
}
  </style>
</head>


<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(images/bg.gif);" alink="#000099" link="#000099" vlink="#990099">

<table style="width: 800px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="10" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="82" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="15" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="1" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="1" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="678" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="13" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="1" /></td>

    </tr>

    <tr>

      <td colspan="7"><img name="logo" src="images/logo.jpg" id="logo" alt="" border="0" height="123" width="800" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="123" width="1" /></td>

    </tr>

    <tr>

      <td colspan="7"><img name="index_r2_c1" src="images/index_r2_c1.jpg" id="index_r2_c1" alt="" border="0" height="1" width="800" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="1" width="1" /></td>

    </tr>

    <tr>

      <td colspan="5"><a href="index.php"><img style="border: 0px solid ; width: 109px; height: 26px;" name="Accueil" src="images/Accueil.jpg" id="Accueil" alt="" /></a></td>

      <td style="border: 1px solid black; vertical-align: top; text-align: center; width: 50%;" rowspan="11" background="images/back.jpg">
<div style="height: 460px; top: 0; left: 0; overflow: auto">
<!-- Champ de recherche Google -->
      <center>
      <form method="get" action="http://www.google.fr/search">
        <table>

          <tbody>

            <tr>

              <td> <a href="http://www.google.fr/"><img src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" align="left" border="0" /></a><br />

              <input name="q" size="31" maxlength="255" value="" type="text" /> <input name="hl" value="fr" type="hidden" /><input name="btnG" value="Recherche Google" type="submit" /> </td>

            </tr>

          </tbody>
        </table>
      </form>

      </center>

<!-- Google -->

        <center><img style="width: 50px; height: 19px;" alt="" src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=rivraysarl.dat&amp;dd=war2orc&amp;ft=4" /></center>
<?php
// Affichage du compteur instantané (compteur live ou live counter):
// ==========================================
// On lit les lignes du fichier /compteur-live/compteur-live.txt
// dans le tableau $compteur_live.
// Ce fichier contient 2 lignes par visiteur connecté. Le nombre de visiteurs connecté
// est donc la moitié du nombre de lignes du fichier.
$compteur_live = file("compteur-live/compteur-live.txt");
echo (count($compteur_live)/2)." ";
if((count($compteur_live)/2) > 1) {
echo "visiteurs connectés";
}
else {
echo "visiteur connecté";
}
?>
<?php 
    ####################################################
    #      SPONGE NEWS 2.2 Génération du cookie        #
    ####################################################                  

if ($action == "comment" && $action2 == "transit"){
  setcookie("SN_nom",$auteur,time()+86400*365,"/");
  setcookie("SN_mail",$mail,time()+86400*365,"/");
  setcookie("SN_url",$url,time()+86400*365,"/");
}
    ####################################################
    #      SPONGE NEWS 2.2 Génération du cookie        #
    ####################################################  
	
	

    ################################
    #      SPONGE NEWS 2.2         #
    ################################                   

//    CONFIGURATION

 $sndir  = "news/"; // Inscrire le répertoire ou figure le script SpongeNews par rapport a la page où vous y 
                  // mettrez cette page en "include". 
                  // EX: $sndir  = "news/"
				  // NE PAS OUBLIER LE "/" À LA FIN
				  
 $current = "index.php"; // Nom de la page où vous y mettrez cette page en "include". 
                         // EX: $current = "index.php"
		                 // DOIT AVOIR L'EXTENSION *.PHP ou *.PHP3 ou *.PHP4 SEULEMENT

//    LE CODE très long ;0)
include $sndir."news.php";  

    ################################
    #      SPONGE NEWS 2.2         #
    ################################  
	
	
?></div></td>

      <td rowspan="12"><img name="index_r3_c7" src="images/index_r3_c7.jpg" id="index_r3_c7" alt="" border="0" height="476" width="13" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="26" width="1" /></td>

    </tr>

    <tr>

      <td colspan="5"><a href="forum/index.php"><img style="border: 0px solid ; width: 109px; height: 28px;" name="forum" src="images/forum.jpg" id="forum" alt="" /></a></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="28" width="1" /></td>

    </tr>

    <tr>

      <td colspan="5"><a href="http://bloodee.free.fr/index2.php"><img style="border: 0px solid ; width: 109px; height: 30px;" name="ftp" src="images/ftp.jpg" id="ftp" alt="" /></a></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="30" width="1" /></td>

    </tr>

    <tr>

      <td colspan="5"><a href="http://bloodee.free.fr/mp3"><img style="border: 0px solid ; width: 109px; height: 26px;" name="mp3" src="images/mp3.jpg" id="mp3" alt="" /></a></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="26" width="1" /></td>

    </tr>

    <tr>

      <td colspan="4"><a href="#galerie" onclick="window.open('fig/index.html','view_gallery','height=430,width=631,scrollbars=no');"><img style="border: 0px solid ; width: 108px; height: 27px;" name="galerie" src="images/galerie.jpg" id="galerie" alt="" /></a></td>

      <td rowspan="8"><img name="index_r7_c5" src="images/index_r7_c5.jpg" id="index_r7_c5" alt="" border="0" height="366" width="1" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="27" width="1" /></td>

    </tr>

    <tr>

      <td colspan="4"><a href="http://bloodee.free.fr/videos"><img style="border: 0px solid ; width: 108px; height: 30px;" name="video" src="images/video.jpg" id="video" alt="" /></a></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="30" width="1" /></td>

    </tr>

    <tr>

      <td colspan="3"><a href="#admin" onclick="window.open('fig/admin','Administration')"><img style="border: 0px solid ; width: 107px; height: 27px;" name="admin" src="images/admin.jpg" id="admin" alt="" /></a></td>

      <td rowspan="6"><img name="index_r9_c4" src="images/index_r9_c4.jpg" id="index_r9_c4" alt="" border="0" height="309" width="1" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="27" width="1" /></td>

    </tr>

    <tr>

      <td colspan="3"><a href="mailto:titi@etpan.net"><img style="border: 0px solid ; width: 107px; height: 33px;" name="contact" src="images/contact.jpg" id="contact" alt="" /></a></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="33" width="1" /></td>

    </tr>

    <tr>

      <td colspan="3"><img name="index_r11_c1" src="images/index_r11_c1.jpg" id="index_r11_c1" alt="" border="0" height="9" width="107" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="9" width="1" /></td>

    </tr>

    <tr>

      <td rowspan="3"><img name="index_r12_c1" src="images/index_r12_c1.jpg" id="index_r12_c1" alt="" border="0" height="240" width="10" /></td>

      <td background="images/link.jpg"><small><small>-
      <a href="http://bts-2.skyblog.com/">blog BTS</a><br />

- <a href="http://simplyme10.skyblog.com/">blog of Maude</a><br />

- <a href="http://www.forum-toshop.com/">Forum-Toshop</a><br />

- <a href="http://www.prizee.com/">Prizee</a><br />

- <a href="http://www.ebay.fr/">ebay</a><br />

- <a href="http://www.01net.com/">01net</a><br />

- <a href="http://www.zepeople.com/accueil.php">Zepeople</a><br />

- <a href="http://www.myefarm.com/">My e-farm</a><br />

- <a href="http://www.aduf.org/">Aduf.org</a><br />

- <a href="http://www.vente-privee.com">Vente-priv&eacute;e</a><br />

- <a href="http://www.souffle.org/">Souffle.org</a><br />

- <a href="http://www.animeka.com/">AnimeKa</a><br />

- <a href="http://www.peer2p.com/">Peer2p.com</a><br />

- <a href="http://www.whatismyip.org/">Whatismyip.org</a><br />

      </small></small> </td>

      <td rowspan="3"><img name="index_r12_c3" src="images/index_r12_c3.jpg" id="index_r12_c3" alt="" border="0" height="240" width="15" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="176" width="1" /></td>

    </tr>

    <tr>

      <td rowspan="2"><img name="index_r13_c2" src="images/index_r13_c2.jpg" id="index_r13_c2" alt="" border="0" height="64" width="82" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="50" width="1" /></td>

    </tr>

    <tr>

      <td><img name="bas" src="images/bas.jpg" id="bas" alt="" border="0" height="14" width="678" /></td>

      <td><img src="images/spacer.gif" alt="" border="0" height="14" width="1" /></td>

    </tr>

  </tbody>
</table>

</body>
</html>

J'espere que quelqu'un pourra m'éclairer^^ Smiley smile

Merci

fvsch

25 Feb 2006 à 20:05

Alsacréations n'est pas un forum consacré au développement PHP. On y parle parfois de PHP, mais uniquement et spécifiquement dans l'optique de l'utilisation de PHP vis-à-vis des standards du web et de l'accessibilité des contenus.

Ensuite, si la question porte uniquement sur le traitement par un navigateur ou plusieurs de ton code HTML + CSS, merci de ne proposer que du HTML comme code. En fait, le PHP, on s'en fout un peu Smiley cligne

Ensuite, un petit conseil : si tu as l'intention de faire plus de deux ou trois sites pour les copains dans les années à venir, je recommande fortement l'utilisation de technologies standard et accessibles.

XHTML pour la structure, CSS pour la mise en forme. Sans oublier que les éditeur What You See Is Not Really What You Get à la Dreamweaver, c'est le mal Smiley biggrin

Là pour l'instant il y a trop de tableaux partout, et je ne suis pas compétent sur le comportement dans les différents navigateurs des tableaux utilisés pour la mise en page. En même temps, j'ai une excuse : quand j'ai commencé à me former pour l'édition web, il y a à peu près deux ans, ce mode de construction des pages était déjà mort. Smiley langue

Bon allez, je vais arrêter de faire ma mauvaise tête Smiley confused

, surtout que ça ne fait pas un accueil très sympa. Je te conseillerais par contre de faire un tour du côté des tutoriels d'Alsacréations qui proposent des exemples de mise en page en XHTML + CSS.

Et si tu tiens à rester aux tableaux pour la structure, essaie au moins de simplifier un minimum. N'imbrique pas des tableaux dans des tableaux dans des tableaux, par exemple.
Enfin, tu n'aurais pas des éléments (genre des tableaux) en height: 100%; ou en overflow: auto; ?

bloodee

26 Feb 2006 à 00:35

Bonsoir, et merci de ta réponse, en fait mon site est développé completement en html, c'est juste que j'ai rajouté un tout petit scipt php pour les news^^
J'ai créé cette page a l'aide de fireworks et Nvu, et j'avoue que le fait de tout recommencer juste pour un probleme dans les commentaires me repousse un peu...

"height: 100%; ou en overflow: auto;"
a priori non je n'en a pas Smiley ohwell

Je voudrais bien simplifier mes tableaux mais je suis encore qu'un débutant dans ce domaine et je sais pas trop comment faire^^

fvsch

26 Feb 2006 à 00:51

bloodee a écrit :
Je voudrais bien simplifier mes tableaux mais je suis encore qu'un débutant dans ce domaine et je sais pas trop comment faire^^

Un truc tout simple :
- ne pas utiliser un tableau pour mettre un paragraphe ou un simple bloc de texte.
- ne pas utiliser des cellules de tableau vides pour ménager des espaces vides, mais plutôt les propriétés CSS faites pour ça (margin, padding...).

Là encore, je te renvoie aux tutoriels d'Alsacréations. Tu verras, ça aide Smiley cligne

Au fait, c'est NVU qui t'a fait une page sans Doctype (déclaration de type de document, tout en haut de la page...) ?
Il est pas gentil alors NVU. Va falloir que j'aille engueuler les développeurs ou quoi ? Smiley fache

bloodee

26 Feb 2006 à 01:10

Oui c'est moi qui ai retiré le Doctype, je ne savais pas que ca avait une importance dans le code Smiley confused

Je vais me référer aux tutoriels, merci beaucoup.

EDIT: en effet j'ai un overflow: auto, je l'ai mis auto car scroll me rajoute également un scroll en bas de tableau.
Modifié par bloodee (26 Feb 2006 - 12:46)

fvsch

26 Feb 2006 à 13:34

bloodee a écrit :
Oui c'est moi qui ai retiré le Doctype, je ne savais pas que ca avait une importance dans le code

Laurent Denis explique tout ça :
http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-nous

bloodee a écrit :
EDIT: en effet j'ai un overflow: auto, je l'ai mis auto car scroll me rajoute également un scroll en bas de tableau.

Suivant qu'il s'agisse d'une div en hauteur fixe ou d'une cellule de tableau, elle peut s'allonger en fonction de son contenu, ou pas. Si elle ne s'allonge pas et qu'elle a un overflow:auto;, alors dès que le contenu dépasse la zone allouée, une barre de défilement apparaît.
Le but est donc que ça s'allonge en fonction du contenu.

Pour cela, il faut probablement supprimer les mentions de height: __px; qui traînent soit dans ta feuille de style, soit dans les attributs style de tes balises html, pour les éléments qui n'ont pas besoin d'avoir une hauteur fixe.

De plus, IE interprète généralement height comme une déclaration de hauteur minimale, et pas de hauteur absolue. D'où des différences de rendu avec les navigateurs qui respectent les CSS sur ce point là.

Sujet clos