28172 sujets

CSS et mise en forme, CSS3

Mon texte change de ligne dans un tableau [IE6-8]

Je ne comprends pas tout j'ai un tableau 3 lignes 5 colonnes, mon texte qui est dans 4 colonne de la ligne du haut saute sur la 3ième ligne. Et si je clic là ou il devrait être il remonte.

<td bgcolor="#FFFFFF">
		<table width="100%" cellspacing="0" cellpadding="0" border="0" >
			<tr>
				<td width="20%" rowspan="3" style="background:url(ligne.bmp) repeat-x; background-position:center">
				<img src="bloc_g.png"/></td>
				<td height="40" width="20%" valign="bottom"><a href="index.php?menu=1" class="<?=$actif[1]?>"><?=$rubrique[1]?></a></td>
   				<td width="20%" valign="bottom"><a href="index.php?menu=2" class="<?=$actif[2]?>"><?=$rubrique[2]?></a></td>
   				<td width="20%" valign="bottom"><a href="index.php?menu=3" class="<?=$actif[3]?>"><?=stripslashes($rubrique[3])?></a></td>
  				<td width="20%" valign="bottom"><a href="index.php?menu=4" class="<?=$actif[4]?>"><?=$rubrique[4]?></a></td>
 			</tr>
 			<tr>
   				<td height="20" colspan="4" style="background:url(ligne.bmp) repeat-x; background-position:center;">&nbsp;</td>
  			</tr>
  			<tr>
    			<td height="40" colspan="4" class="hmenu">&nbsp;</td>
  			</tr>
	    </table>	</td>


Sous firefox et chrome j'ai pas de problème.
Merci
Bonjour aussi,

(sujet déplacé dans le bon salon)

le bout de code que tu nous fournis ne permet pas de reproduire le problème. On peut supposer que par exemple la largeur du TD qui contient ton tableau a un impact.

Il faudrait donc nous donner également le code CSS associé (quitte à renseigner la propriété width de la table).

Quelques remarques au passage :

* les tableaux imbriqués posent souvent des problèmes d'accessibilité.

* les attributs de mise en forme (bgcolor, cellspacing, ...) sont obsolètes et avantageusement remplacés par des CSS.


Edit: d'autre part le PHP ne nous est d'aucune aide pour faire les tests. Merci de nous donner le code html généré. Smiley cligne
Modifié par Heyoan (06 Aug 2010 - 10:54)
Merci, je vais essayer de trouver le code minimal ou le problème apparait.
Ok pour le CSS, mais le bgcolor="FFFFFF" étant présent une seule fois je trouvais lourd de le mettre dans une class.
Je ne savais pas que les propriété d'une table cellspacing par ex pouvait être défini dans un CSS.
Faut dire que j'ai de mauvaise habitudes j'ai fait un site il y a 10ans en html, j'ai jamais eu le temps de vraiment de le faire évoluer (un peu de php et mysql pris à gauche à droite).
Sur un nouveau site j'essaie de m'améliorer mais parfois je trouve les infos (moins de tableau plus de div) trop tard et j'ai pas trop le courage de faire marche arrière.
maika a écrit :
le bgcolor="FFFFFF" étant présent une seule fois je trouvais lourd de le mettre dans une class.
Bof... 
table { background: #fff; }
A noter qu'en évitant les attributs de mise en page et les styles en ligne (style="...") on dissocie contenu et présentation... ce qui a beaucoup d'avantages (maintenance, feuille de style disponible pour plusieurs pages, feuille de style en cache, clarté, ...)

maika a écrit :
moins de tableau plus de div
Oui mais non : lire Arrêtons de remplacer systématiquement les tableaux par des div.
le problème c'est que j'ai plusieurs tables et c'est jamais la même définition, j'ai un style par appel. bon c'est peut être là le problème: ne pas faire quelque chose d'uniforme..

PS: en fait le problème survient juste sur un IE8 sur un seven 64bits.
la IE8 sous XP 32bits et Xp 64bits j'ai pas de problème.
du coup il faudra que je récupère le seven pour faire les tests
Modifié par maika (06 Aug 2010 - 11:36)
Surement un problème d'ordre ou/et de temps d'exécution des commandes, car plus la page comporte d'élément plus le cas arrive souvent. mais c'est jamais systématique...
La j'ai peur de ne pas m'en sortir.
je crois que j'ai parlé trop vite j'avais un truc du style.

<table width="100%">
  <tr>
    <td width="100px"> rowspan="3" style="background....">
      <div><p></p>...<p></p></div>
      <p style="line-height:200px">&nbsp;</p>
    <td>
    <td height="100px" colspan="3">une image</td>
    <td width="100px" rowspan="3">une image des div</td>
  </tr>
  <tr>
    <td>
       <table> la table de mon premier post </table>
    </td>
  </tr>
  <tr>
    <td>
      <div>Zone Texte</div>
    </td>  
</tr>
</table>


c'est le <p style="line-height:200px">&nbsp;</p> qui gênait, je l'avais mis pour avoir une taille minimal quand j'avais peu de texte dans la Zone Texte. Car le min-width dans le div ne marche pas avec IE.

Voilà à priori c'est résolu même si je ne sais pas trop pourquoi ça ne marchait pas.

Alors j'ai mis un height="xxx" dans le <td> de la zone texte, qui me sert de min en fait car s'il faut plus de place cette taille n'est pas respectée.
Modifié par maika (06 Aug 2010 - 15:21)
Hello,

Tu a un <td> non fermé dans le dernier code que tu a posté. C'est peut-être un copié/collé malheureux, mais au cas où, ça pourra peut-etre t'éviter d'autres déboires.

Et sinon,
a écrit :
Je ne savais pas que les propriété d'une table cellspacing par ex pouvait être défini dans un CSS.

A ma connaissance, cellspacing est un peu particulière. Elle peut etre remplacée par border-spacing en CSS, mais IE a quelques difficultés avec. Il me semble que rajouter border-collapse:collapse est nécessaire pour lui.
Tymlis a écrit :
A ma connaissance, cellspacing est un peu particulière. Elle peut etre remplacée par border-spacing en CSS, mais IE a quelques difficultés avec. Il me semble que rajouter border-collapse:collapse est nécessaire pour lui.
Dit autrement, border-spacing n'est pas interprété dans IE < 8 mais de toute façon on n'utilise généralement pas cette propriété dès lors que l'on spécifie border-collapse:collapse.
Sujet clos
Aller à