18073 sujets

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

Hauteur de cellules non comprises par Internet Explorer

Bonjour,
Avant d'exposer le problème, je dois préciser plusieurs choses pour justifier la présentation du document et le manque de clarté.
J'ai beaucoup de difficultés manuelles (tétraplégique c5), le clavier est interdit et l'utilisation de la souris (qui ressemblerait plutôt à un gros rat, voyez-vous) assez compliquée. Il ne s'agit pas de faire pleurer dans les chaumières, c'est juste pour expliquer le code « furieusement ramassé ».
Je sais aussi que la mise en page par tableau n'a pas la côte. Tant pis, je prends le risque :
La page a été mise au format html (il s'agit normalement d'un fichier php) et le tableau vidé de son contenu pour plus de... Clarté.
Le problème est que la petite ombre portée s'affiche mal dans Internet Explorer, mais impossible de savoir d'où vient l'erreur.
Je bidouille le code depuis maintenant une semaine. J'ai relu les tutoriels et les faqs, testé les possibilités les plus invraisemblables,... En vain. Ci-dessous le code et les deux petits fichiers graphiques :

<html>
<head>
<style type="text/css">
table#rub {margin: 0; padding: 0}
table#rub td#left {margin: 0; padding: 10px 0px 10px 10px; background: #FAA731}
table#rub td#right {margin: 0; padding: 0; height: 300px; background: url(tbl_haut_triangle.gif) no-repeat; border: 1px solid navy}
table#rub td#lisere {margin: 0; padding: 0; background: url(tbl_haut_lisere.gif) repeat-y left top}
</style>
</head>
<body>
<p align="center">bla bla titre</p>
<p>
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="rub">
	<tr>
		<td valign="top" width="520" rowspan="2" id="left">

bla bla<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bla bla
bla bla<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bla bla
</td>
		<td valign="top" align="center" id="right">
				<br><br><br><br><br><br>bla bla
</td>
	</tr>
	<tr>
		<td valign="top" align="center" id="lisere">
bla bla<br><br><br><br><br><br><br><br><br><br><br>bla bla
		</td>
	</tr>
</table>
</p>
</body>
</html>


upload/2675-tblhauttria.gif upload/2675-tblhautlise.gif

Merci de votre aide.
Frédéric

(EDIT par Raphael : remplacement des QUOTE (citation) par des CODE, puisque ce code n'est pas une citation je crois Smiley cligne )

Très juste, merci.
Petite précision : dans la balise css table#rub td#right, l'élément border: 1px solid navy est normalement à retirer.
Frédéric
Modifié par Patatras (13 Oct 2005 - 18:02)
Personne pour m'aider ?
pourtant, il ne doit pas manquer grand-chose, un "display: machin" ou un "position: truc",...
Frédéric
Bonjours Patatras,
Tes fichiers image ont l'extension .gif, alors que se sont des .jpg.
C'est "IrfanView" qui me l'a dit .
C'est surprenant de la part de firefox et opera qui les ouvrent sans problèmes apparent.
Bonjour papillon41,
Je t'assure que ce sont bien des gifs, créés et compressés avec Photoshop. J'ai téléchargé "IrfanView" et visionné les fichiers, pour lesquels il indique :
compression : GIF - LZW
Par acquis de conscience, j'ai modifié l'extension en .jpg. Windows xp pro les affiche quand même, mais les deux navigateurs Internet Explorer et firefox ne les reconnaissent plus. J'en conclus que ce sont bien des .gifs
À mon avis, le problème est ailleurs. J'ai laissé une bordure d'un pixel pour montrer qu'Internet Explorer agrandit considérablement la cellule du haut.
J'ai mis le fichier en-ligne pour plus de facilité là
Cordialement,
Frédéric
Je crois que tu as mis trop de <br> dans "#left".
IE agrandi le <td> mais pas FF ni O.
En ce qui concerne les images, ce sont celles de ton post qui sont bizarres ?
Bonjour,
Non, il n'y a pas trop de <br>, la cellule de gauche doit pouvoir être très longue (en fonction des pages, elle doit pouvoir contenir beaucoup de données... Ou peu).
La cellule en haut et à droite ne doit faire QUE 300 pixels de haut, alors qu'Internet Explorer semble vouloir la répartir sur la hauteur de la cellule de gauche.
Les images sont en effet altérées. C'est le fait de les avoir uploadées sur le forum. Ce n'est pas le cas sur le document initial
Bonjour,
IE interprète "td#right {... height: 300px;...}" comme si c'était "td#right {... max-height: 300px;...}.
En effet, remplace remplace "heigh" par "max-heigh" dans ton "td#right", et tu aura le même comportement dans IE et FF.
Bonjour Papillon 41,
Certes, la modification de la balise "td#right {... height: 300px;...}" en "td#right {... max-height: 300px;...}" donne le même résultat dans ie et ff, mais la hauteur de la cellule n'est toujours pas celle escomptée.
En d'autres termes, comment imposer aux navigateurs une taille fixe de 300 pixels à la cellule td#right ?
Merci de ta patience.
Cordialement,
Frédéric
Bonjour, comment vas tu ce matin ?
Tu peux trouver une échappatoire pour truander IE en donnant une hauteur à "td#lisere" telle que la hauteur de "td#lisere" + "td#right" > "td#left" soit dans ton cas environ 900px.
table#rub td#lisere {margin: 0; padding: 0; background: url(tbl_haut_lisere.gif) repeat-y left top;height:900px;}
a écrit :
Bonjour, comment vas tu ce matin ?

Je m'accroche.*
Quant à mon tableau, ce n'est pas possible d'opérer de la sorte car la hauteur de la cellule de gauche est TRÈS flexible. Elle doit pouvoir contenir un ou plusieurs (jusqu'à plus de 20) tableaux, qui eux-mêmes ont une hauteur variable, en fonction de leur contenu.
Il n'y a qu'une cellule (sur les trois) qui a une taille fixe :Rappel du lien et donc j'ai du mal à comprendre pourquoi la cellule "td#lisere" ne commence pas immédiatement après le 300e pixel de la cellule "td#right", ou plutôt pourquoi la cellule "td#right" fait plus que les 300 pixels de haut qui lui sont normalement attribués.
Cordialement,
Frédéric

* nan j'rigole Smiley ravi
Accroches toi Patatras,
Avant de remplacer ta "table" par des "div", je te propose de mettre ta lisière en trompe l'oeil dans une "div" soit :
- Tu retire "background: url(tbl_haut_lisere.gif) repeat-y left top;" de "td#lisere".
- Tu remplace ton 
<p>
<table...
...
</p>
qui ne sert à rien par
<div style="background: url(tbl_haut_lisere.gif) repeat-y 530px;">
...
</div>
Réflexion du matin en ouvrant le message : « * »
Bonjour Papillon41,
C'est un truc comme ça que tu veux me faire faire (il est en ligne) :
<html>
<head>
<style type="text/css">
	div#rub {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	ul#rub  {
		list-style-type: none;
		display: inline;
	}
	ul#rub li#left {
		list-style-type: none;
		margin: 0;
		padding: 10px 0px 10px 10px;
		background: #FAA731;
		width: 520px;
	}
	ul#rub li#right {
		margin: 0;
		padding: 0;
		height: 300px;
		background: url(tbl_haut_triangle.gif) no-repeat;
		display: block;
	}
	ul#rub li#lisere {
		margin: 0;
		padding: 0;
		background: url(tbl_haut_lisere.gif) repeat-y;
		display: block;
		height: 100%;
	}
</style>
</head>
<body>
<p align="center">bla bla titre</p>
<div id="rub" align="center">
<ul id="rub">
<li id="left">
bla bla<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bla bla
bla bla<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bla bla
</li>
<li>
<ul>
<li id="right"><br><br><br><br><br><br>bla bla</li>
<li id="lisere"><br><br><br><br><br><br>bla bla<br><br><br><br><br><br>bla bla</li>
</ul>
</li>
</ul>

</div>
</body>
</html>


Mais les deux éléments sont l'un au-dessus de l'autre malgré le display:inline. Smiley decu

Cordialement,
Frédéric

* Dis donc, Rolland, tu ne serais pas en train de me faire basculer vers une méthode de codage dont j'avais prévu d'attaquer l'étude sérieuse un peu plus tard ! ! ! ? Smiley rolleyes
En d'autres termes et pour faire court, en plus d'être exigeant, je suis pressé ! Smiley ravi Smiley lol
J'ai trouvé il y a trois jours sur ton site un lien vers html-kit. C'est une petite merveille ce logiciel ! Quand je pense que je viens de renouveler ma "cotisation" à WEBexpert, pour la version 6....
Associé à Top-Style, Html-kit est vraiment un outil épatant !
Donc, voilà, merci également pour ce lien judicieux.
Bonjour Frédéric,
Et oui, tu vas bientôt coder sans tableaux !
Pour approcher ce que tu veux faire, il faut ajouter : "float: left;" dans "ul#rub li#left".

En ce qui concerne HTML Kit, j'utilise le plug in "tmCSS" pour faire du CSS.
Bon, c'est mieux ! Smiley biggrin
J'ai encore un décalage d'une trentaine de pixels en haut de la colonne de droite et deux ou trois pixels entre les deux colonnes.
Je me mets sur le coup. Le premier qui a trouvé prévient l'autre !
Frédéric

PS : oui mais j'avais bien dit que c'était pas le mom... Smiley cligne
Sujet clos
Aller à