La cellule de table ne colle pas à la hauteur que j'essaie d'appliquer

Question

J'ai un <td> qui est à peu près vide puisqu'il ne contient qu'un  . La hauteur que j'essaie d'appliquer est de 110 pixels, mais pour une raison quelconque, la cellule du tableau est rendue avec une taille de 182,317 pixels. Pourquoi?

Il y a quelques choses que je l'ai déjà cochés:

• Le font-size qui s'applique à l'espace insécable n'est pas réglé à quelque chose qui ne peut pas entrer dans la cellule du tableau.
• Il n'y a aucune cellule de tableau sur la même ligne qui doit s'étirer pour adapter son contenu dans cette cellule.
• Il n'y a pas de code CSS qui écrase la hauteur que je veux avec la valeur inexplicable de 182,317 pixels.

Quoi d'autre pourrait être le coupable? La cellule affiche la hauteur attendue dans Chrome, mais elle est endommagée dans Firefox 3.6. Le mode de rendu est XHTML 1.0 Strict (oui, j'ai validé).

Mise à jour: vous pouvez afficher et analyser la page au http://labs.pieterdedecker.be/vspwpg/. Le <td> dont je parle est leftbartop.

Answer 1

Vous ne dites pas laquelle des colonnes de la table a le problème. Mais, je pense qu'il est:

<td id="bottombar2" colspan="2"></td> 

L'attribut colspan="2" indique la cellule à deux rangées de haut. Vos lignes sont 95px, ce qui ferait 190px de haut (à peu près la hauteur que vous voyez).

Chaque ligne de votre table spécifie un nombre différent de colonnes 5, 1 et 3. Cela peut expliquer pourquoi la table est rendue différemment par différents navigateurs.

Answer 2

Avez-vous défini un line-height pour les cellules du tableau ou quelque part dans la cascade qui les affecte directement?

Answer 3

ça marche si vous dites

{height:95px !important;} 

Peut-être que vous avez défini padding ou quelque chose comme ça qui affecte le td

Answer 4

Utilisez Firebug et jeter un oeil à la cellule par l'inspecteur de l'élément. En bas à droite en utilisant Firebug, regardez le style. Faites défiler vers le bas jusqu'à ce que vous voyiez une zone où vous définissez la hauteur de la cellule. Si vous ne pouvez toujours pas le trouver, faites un clic droit dans la zone de style et ajoutez-le dans le sélecteur de style le plus haut. Vous finirez par trouver le coupable qui écrase votre style, ou vous pourrez trouver une classe que vous pouvez utiliser pour écraser le style qui est appliqué. Vous pouvez également utiliser les outils de développement Google Chrome's pour faire la même chose (juste un clic droit n'importe où sur la page et "inspecter l'élément" pour les faire apparaître).