[Résolu]-Tableau crée sous Dream se décalant à gauche sous Firefox

Question

Spiraleweb

25 Sep 2007 à 12:06

Bonjour à tous,
Après m'être arraché les cheveux, parcouru toutes les discussions possible sur le sujet, mis Google à l'épreuve sans rien trouver...vous êtes ma dernière lumière !

Tout d'abord, j'espère avoir posté dans la bonne catégorie, sinon j'en suis d'avance désolée. Pour ceux qui voudront bien m'aider, je vais essayer d'être la plus claire possible & de vous donner toutes les informations nécessaires, n'hésitez pas à me signaler tout manque de détails.

Je crée un site tout simple sous Dreamweaver MX en mode "Mise en Forme", fonctionnant avec un tableau unique dans lequel se trouve un menu de type roll-over (en haut) crée sous Image Ready mais intégré "images par images", quelques lignes de texte & quelques photos. Rien de bien compliqué, code HTML simple.

Pour le tableau, j'ai spécifié une largeur de 750px dans laquelle s'intègre le menu. Sur la plupart des pages, la hauteur du tableau est de 572px, ce qui suffit largement...jusque là tout va très bien...

Voici le "problème-défi" : quelques pages contiennent beaucoup plus de photos que les autres, ainsi je redimensionne la hauteur du tableau (la largeur ne bouge pas) selon mes besoins, par exemple : d'environ 580px sur les autres pages, on passe ici, avec les photos, à 1689px.
Lorsque je teste la page sous FireFox, c'est là que le problème apparait : le tableau se décale de quelques cm à gauche. Ce problème n'apparait pas sous IE.

- J'ai comparé les codes source des 2 pages : tableau à 580px de hauteur & tableau à 1689px, ils sont identiques... & pourtant, l'affichage sous FireFox n'est pas le même.

- J'ai testé la page contenant le tableau de plus de 1600px sans les photos, donc rien dans le tableau, même problème.

- Dés que le tableau passe à environ plus de 800px en hauteur, la page se décale à gauche. Ce sont exactement les mêmes pages, seule la hauteur du tableau diffère.

-Selon le Validateur W3C, les seuls problèmes sont : "there is no attribute "LEFTMARGIN"... & toutes les autres balises "Margin"

- J'ai essayé de remplacer "leftmargin", "topmargin", "marginwidth", "marginheight" par

<style>
* {margin: 0; padding: 0;}
</style>

Le seul réel problème vient de l'agrandissement en hauteur de ce tableau & je suis sûre que ça doit être un truc tout bête auquel je n'aurais pas pensé...mais je n'ai plus aucune idée..
Je tourne en rond sur ce problème depuis deux jours & là j'ai vraiment besoin de cerveaux supplémentaires !
En espérant trouver de l'aide, merci à tout ceux qui prendront le temps de me répondre.
Stella

Voici le code HTML (généré par Dreamweaver MX) d'une page simple intégrant le menu roll-over (java script généré par Image Ready), 2 images en jpg, le tout inclut dans le fameux tableau de 1689px de haut. Le même code fonctionne très bien pour un tableau de 800px de haut.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		menu_01_over = newImage("images/menu_ove.gif");
		menu_01_Collection_Lingerie_over = newImage("images/menu_01-Collection-Lingerie.gif");
		menu_02_over = newImage("images/menu_02-_ove.gif");
		menu_02_Collection_Lingerie_over = newImage("images/menu_02-Collection-Lingerie.gif");
		menu_03_Collection_Lingerie_over = newImage("images/menu_03-Collection-Lingerie.gif");
		menu_03_Linge_de_Bain_over = newImage("images/menu_03-Linge-de-Bain_over.gif");
		menu_03_Collection_Tops_over = newImage("images/menu_03-Collection-Tops_ove.gif");
		menu_04_Linge_de_Bain_over = newImage("images/menu_04-Linge-de-Bain_over.gif");
		menu_04_Collection_Tops_over = newImage("images/menu_04-Collection-Tops_ove.gif");
		menu_04_Conseillere_de_Vente_over = newImage("images/menu_04-Conseillere-de-Vent.gif");
		menu_05_Collection_Tops_over = newImage("images/menu_05-Collection-Tops_ove.gif");
		menu_05_Conseillere_de_Vente_over = newImage("images/menu_05-Conseillere-de-Vent.gif");
		menu_05_Contact_over = newImage("images/menu_05-Contact_over.gif");
		menu_06_Conseillere_de_Vente_over = newImage("images/menu_06-Conseillere-de-Vent.gif");
		menu_06_Contact_over = newImage("images/menu_06-Contact_over.gif");
		menu_06_Edition_Catalogue_over = newImage("images/menu_06-Edition-Catalogue_o.gif");
		menu_07_Contact_over = newImage("images/menu_07-Contact_over.gif");
		menu_07_Edition_Catalogue_over = newImage("images/menu_07-Edition-Catalogue_o.gif");
		preloadFlag = true;
	}
}

// -->
</SCRIPT>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="660066" vlink="660066" alink="660066" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ONLOAD="preloadImages();">
<div align="center">
  <table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="f4e8f5">
    <!--DWLayoutTable-->
    <tr> 
      <td width="50" height="0"></td>
      <td width="60"></td>
      <td width="104"></td>
      <td width="128"></td>
      <td width="5"></td>
      <td width="102"></td>
      <td width="38"></td>
      <td width="68"></td>
      <td width="70"></td>
      <td width="20"></td>
      <td width="105"></td>
    <TR> 
      <TD height="60" colspan="2"> <IMG NAME="menu_01" SRC="images/menu_01.gif" WIDTH=110 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_01_Map"></TD>
      <TD> <IMG NAME="menu_02" SRC="images/menu_02.gif" WIDTH=104 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_02_Map"></TD>
      <TD colspan="2"> <IMG NAME="menu_03" SRC="images/menu_03.gif" WIDTH=133 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_03_Map"></TD>
      <TD> <IMG NAME="menu_04" SRC="images/menu_04.gif" WIDTH=102 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_04_Map"></TD>
      <TD colspan="2"> <IMG NAME="menu_05" SRC="images/menu_05.gif" WIDTH=106 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_05_Map"></TD>
      <TD colspan="2"> <IMG NAME="menu_06" SRC="images/menu_06.gif" WIDTH=90 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_06_Map"></TD>
      <TD> <IMG NAME="menu_07" SRC="images/menu_07.gif" WIDTH=105 HEIGHT=60 BORDER=0 ALT="" USEMAP="#menu_07_Map"></TD>
    </TR>
    <tr> 
      <td height="6"> 
      <td> 
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr> 
      <td height="54"> 
      <td colspan="3" rowspan="2" valign="top"><a href="index.htm"><img src="images/TitreAccueilPetit.gif" width="292" height="88" border="0"></a> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr> 
      <td height="34"> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="2" valign="top"><img src="images/TitreJoliesFormes.gif" width="138" height="34"></td>
      <td>&nbsp;</td>
      <td></td>
    </tr>
    <tr> 
      <td height="1535">&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp; 
      <td>&nbsp;</tr>
  </table>
  <MAP NAME="menu_01_Map">
    <AREA SHAPE="rect" ALT="" COORDS="19,0,92,59" HREF="product.htm"
	ONMOUSEOVER="changeImages('menu_01', 'images/menu_01-ove.gif', 'menu_02', 'images/menu_02-ove.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_01', 'images/menu_01.gif', 'menu_02', 'images/menu_02.gif'); return true;">
  </MAP>
  <MAP NAME="menu_02_Map">
    <AREA SHAPE="rect" ALT="" COORDS="13,0,91,60" HREF="lingerie.htm"
	ONMOUSEOVER="changeImages('menu_01', 'images/menu_01-Collection-Lingerie.gif', 'menu_02', 'images/menu_02-Collection-Lingerie.gif', 'menu_03', 'images/menu_03-Collection-Lingerie.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_01', 'images/menu_01.gif', 'menu_02', 'images/menu_02.gif', 'menu_03', 'images/menu_03.gif'); return true;">
  </MAP>
  <MAP NAME="menu_03_Map">
    <AREA SHAPE="rect" ALT="" COORDS="13,0,121,60" HREF="bain.htm"
	ONMOUSEOVER="changeImages('menu_03', 'images/menu_03-Linge-de-Bain_over.gif', 'menu_04', 'images/menu_04-Linge-de-Bain_over.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_03', 'images/menu_03.gif', 'menu_04', 'images/menu_04.gif'); return true;">
  </MAP>
  <MAP NAME="menu_04_Map">
    <AREA SHAPE="rect" ALT="" COORDS="9,0,86,60" HREF="tops.htm"
	ONMOUSEOVER="changeImages('menu_03', 'images/menu_03-Collection-Tops_ove.gif', 'menu_04', 'images/menu_04-Collection-Tops_ove.gif', 'menu_05', 'images/menu_05-Collection-Tops_ove.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_03', 'images/menu_03.gif', 'menu_04', 'images/menu_04.gif', 'menu_05', 'images/menu_05.gif'); return true;">
  </MAP>
  <MAP NAME="menu_05_Map">
    <AREA SHAPE="rect" ALT="" COORDS="14,0,93,60" HREF="conseillere.htm"
	ONMOUSEOVER="changeImages('menu_04', 'images/menu_04-Conseillere-de-Vent.gif', 'menu_05', 'images/menu_05-Conseillere-de-Vent.gif', 'menu_06', 'images/menu_06-Conseillere-de-Vent.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_04', 'images/menu_04.gif', 'menu_05', 'images/menu_05.gif', 'menu_06', 'images/menu_06.gif'); return true;">
  </MAP>
  <MAP NAME="menu_06_Map">
    <AREA SHAPE="rect" ALT="" COORDS="16,0,79,60" HREF="contact.htm"
	ONMOUSEOVER="changeImages('menu_05', 'images/menu_05-Contact_over.gif', 'menu_06', 'images/menu_06-Contact_over.gif', 'menu_07', 'images/menu_07-Contact_over.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_05', 'images/menu_05.gif', 'menu_06', 'images/menu_06.gif', 'menu_07', 'images/menu_07.gif'); return true;">
  </MAP>
  <MAP NAME="menu_07_Map">
    <AREA SHAPE="rect" ALT="" COORDS="11,0,86,60" HREF="catalogue.htm"
	ONMOUSEOVER="changeImages('menu_06', 'images/menu_06-Edition-Catalogue_o.gif', 'menu_07', 'images/menu_07-Edition-Catalogue_o.gif'); return true;"
	ONMOUSEOUT="changeImages('menu_06', 'images/menu_06.gif', 'menu_07', 'images/menu_07.gif'); return true;">
  </MAP>
</div>
</body>
</html>

[/i]
Modifié par Spiraleweb (21 Jan 2008 - 21:40)

Heyoan

25 Sep 2007 à 12:23

Salut Spiraleweb Smiley cligne

,

sans regarder le code, cette histoire de décalage sur la gauche dans Firefox quand la hauteur augmente me fait penser à la particularité de FF de ne pas mettre de barre de scrolling sur la droite quand elle est inutile Smiley lol

!

Si c'est bien de cela dont il s'agit et si cela te pose vraiment problème : il existe un "fix" css...

A+ Smiley smile

Spiraleweb

25 Sep 2007 à 12:50

Salut Heyoan,
Merci de ta réponse que je me suis empressée de tester, mais rien à faire, j'ai toujours ce décalage à gauche. Le menu étant le même sur toutes les pages, ce décalage est vraiment moche !
Merci encore
Modifié par Spiraleweb (25 Sep 2007 - 12:58)

Spiraleweb

25 Sep 2007 à 13:06

Heyoan, tu as raison, après avoir creusé cette histoire de décalage sous FF, le problème semble bien venir de là.
Effectivement, la barre de scroll verticale décale le tableau d'autant vers la gauche.
Existerait-il un moyen de résoudre le problème sans avoir à afficher une barre de scroll, même grisée, sur toutes les pages n'en ayant pas besoin ? Par exemple un CSS à insérer seulement sur les pages ayant besoin du scroll vertical ?

Spiraleweb

25 Sep 2007 à 18:26

Afin de transformer ce sujet en "résolu", je tiens à remercier Heyoan de m'avoir éclairée sur la raison de mon problème, il a sauvé ce qui me restait de santé mentale !
J'ai utilisé

<style>
html {overflow-y: scroll;}
</style>

sur toutes les pages du site & tant pis si une barre de scroll grisée apparait sur les pages n'en ayant pas besoin.
En espérant que ce sujet puisse aider d'autres personnes.
Merci encore !

Sujet clos

Sémantique web et HTML

[Résolu]-Tableau crée sous Dream se décalant à gauche sous Firefox