18041 sujets

Questions générales et questions de débutants

Comportement div inexpliquable avec IE

Bonjour,
Je ne connais le dev web que de manière approximative, et je rencontre un problème auquel je ne trouve ni de solution, ni d'explication : un conteneur div dont le positionnement dans la page web est inattendu, uniquement avec IE (6 ou 7). Quand la page est chargée, le bloc div ne se positionne pas au "top" de la page, mais au milieu de la page. Les lignes de ce bloc sont fabriquées dynamiquement, en fonction de ce que ramène une requête Sql. La techno utilisée est Java/Jsp.
J'ai bien essayé de positionner la div avec les attributs "position:absolute", ce qui corrige le problème, mais du coup, les blocs suivants ne sont plus positionnés là où ils doivent l'être (logique de la gestion du flux...) ; "position:relative".... Enfin bref, un bon dessin vaut mieux qu'un long discours : voici le code html produit de la .Jsp, (dépourvu de style, version stricte minimum), si quelqu'un veut se le copier/coller dans un .html, et le lancer dans IE, constater le positionnement inattendu, et éventuellement me dire ce qu'il en pense.
Cordialement,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- Utilisation taglibs -->
 
<html>
<head>
<title>09H - base des plis trait&eacute;s par 02P</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<!-- si l'utilisateur n'est pas connecté, renvoi sur la page de login -->
<body>

		<div id="liste_tableau" style="width:100%;height:225;overflow:auto" 

class="cadre_noir">
		<!-- DEBUT - La Array List "ALBRE" est en session -->
		   <table width="100%" cellspacing="1" align="center" border=1>
		    <tr bgcolor="#CCCCCC">
		     <th title="Code de l'encart">Code Encart</th>
		     <th title="Libellé court de l'encart">Libellé</th>
		     <th title="Poids de l'encart">Poids en grammes</th>
		     <th title="Date de début de l'encart">Date Début</th>
		     <th title="Date de fin de l'encart">Date Fin</th>
		    </tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANROBSEFE_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Env. Ret. OBS Orange</font></td>
						   <td nowrap align="center" ><font 

color="#000000">1.5</font></td>
						   <td nowrap align="center" ><font 

color="#000000">07/04/2009</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANROBS_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Env. Ret. OBS FTSA</font></td>
						   <td nowrap align="center" ><font 

color="#000000">2.8</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANXAW_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Env. Ret. Wanadoo</font></td>
						   <td nowrap align="center" ><font 

color="#000000">2.8</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANXENV_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Env. Ret. OE</font></td>
						   <td nowrap align="center" ><font 

color="#000000">3.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANXIFM_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Infos du mois</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.17</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANXMRK_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Coupon marketing</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.17</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ANXOPT_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Optionnel</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.17</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">CT50</font></td>
						   <td nowrap align="center" ><font 

color="#000000">CT50</font></td>
						   <td nowrap align="center" ><font 

color="#000000">1.3</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">EIS_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Encart Interess.</font></td>
						   <td nowrap align="center" ><font 

color="#000000">4.512</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">EMA_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Encart marketing</font></td>
						   <td nowrap align="center" ><font 

color="#000000">4.512</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">EMA_02</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Encart marketing</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.2</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">EMA_03</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Encarts Prel-UEFE</font></td>
						   <td nowrap align="center" ><font 

color="#000000">11.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">EM_OA01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Orange_Assistance</font></td>
						   <td nowrap align="center" ><font 

color="#000000">1.4</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ENCBCR_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Catalogue</font></td>
						   <td nowrap align="center" ><font 

color="#000000">78.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ENVRETOGP_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Env. Ret. OGP</font></td>
						   <td nowrap align="center" ><font 

color="#000000">2.73</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ENV_BAC2</font></td>
						   <td nowrap align="center" ><font 

color="#000000">FSN sur ZS6</font></td>
						   <td nowrap align="center" ><font 

color="#000000">2.9</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">ERT_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Env. Ret. FTSA</font></td>
						   <td nowrap align="center" ><font 

color="#000000">3.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">LPR_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Let. professionnel</font></td>
						   <td nowrap align="center" ><font 

color="#000000">4.512</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">LRE_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Let. residentiel</font></td>
						   <td nowrap align="center" ><font 

color="#000000">4.512</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">LRE_02</font></td>
						   <td nowrap align="center" ><font 

color="#000000">Let. residentiel</font></td>
						   <td nowrap align="center" ><font 

color="#000000">10.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">NLCMOOGP_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">News Letter CMO</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.77</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">NLFACTELECOGP_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">NL. Fact Elec</font></td>
						   <td nowrap align="center" ><font 

color="#000000">5.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">NLFACTELEC_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">News Letter Parrain.</font></td>
						   <td nowrap align="center" ><font 

color="#000000">5.743</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">NLHSOGP_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">News Letter HS</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.09</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#E9EDF5" 

style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">NLM6OGP_01</font></td>
						   <td nowrap align="center" ><font 

color="#000000">News Letter M6</font></td>
						   <td nowrap align="center" ><font 

color="#000000">7.77</font></td>
						   <td nowrap align="center" ><font 

color="#000000">01/01/2008</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
						</tr>
						<tr bgcolor="#FFFFFF" 

onMouseOver="this.style.backgroundColor = '#C5D0E6'" onMouseOut="this.style.backgroundColor = 

'#FFFFFF'" style="cursor:hand;cursor:pointer" title="Cliquez pour connaitre le detail de 

l'enregistrement.">
						   <td nowrap align="center" ><font 

color="#000000">TEST3</font></td>
						   <td nowrap align="center" ><font 

color="#000000">TEST3</font></td>
						   <td nowrap align="center" ><font 

color="#000000">0.0</font></td>
						   <td nowrap align="center" ><font 

color="#000000">14/04/2009</font></td>
						   <td nowrap align="center" ><font 

color="#000000"></font></td>
					   	</tr>
		   </table>	
		   <!-- FIN - La Array List "ALBRE" est en session -->
		</div>
</body>
</html>
Salut carlino et bienvenue, Smiley smile

je n'ai rien vu de spécial ni dans IE6 ni dans IE7...

Ce que je vois par contre c'est que ta page n'a pas de doctype ce qui va faire basculer IE6 en mode Quirks.

Tu pourrais partir d'une bonne structure en utilisant le Squelettor.
Merci Heyoan de ta réponse. Je dois préciser cependant que le problème ne se manifeste pas quand une autre instance de IE est ouverte (fenêtre ou onglet); donc pour faire le test est constaté l'anomalie, il faut "opérer" avec une seule instance de IE lancé qui est celle qui interprète le .html en cause.
Ensuite, à moins que je ne me méprenne, il y a bien un "doctype" en tête du fichier :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

dont je viens de lire les propriétés dans l'article "Les DTD HTML4.01 et XHTML1.0 : comment choisir ?".... Referais-tu le test dans le contexte décrit (une seule instance de IE ouverte, celle qui interprète le .html). Cordialement,
Je voulais dire "un doctype valide" (non tronqué). -> Lire (tous) les liens donnés plus haut. Smiley cligne

Et je n'avais bien qu'une instance d'IE ouverte. Smiley rolleyes
Modifié par Heyoan (15 Apr 2009 - 15:25)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
serait plus approprié ?
carlino a écrit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
serait plus approprié ?
Euh... non : c'est 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Encore une fois : Suivre (tous) les liens donnés plus haut (notamment le Squelettor). Smiley sweatdrop
Merci Heyoan, pour les détails. J'ai bien suivi (tous) les liens, dont Squelettor, qui vient, après quelques tentatives (infructueuses), de générer un squelette de code html, dont le doctype. Merci encore pour tes conseils. Si je solutionne mon problème, je ne manquerai pas de marquer mon post comme "résolu".
Sujet clos
Aller à