CSS2 et balise TD et TH

Bonjour à tous,

J'ai remarqué une curiosité...concernant les balises TD et TH dans un style CSS.

Donc pour chacune je définis (entre autres), un attribut height à 25px, et un border-top de 3px.

Et là, ce qui est surprenant, c'est que :

- Sur IE6, IE7, Chrome, Opéra, Safari : les 3 px vont s'ajouter aux 25px de hauteur (logique d'après moi)

- Sur FF 2 et FF 3, les 3 px vont être inclus dans la hauteur, et donc on aura finalement 22px + 3 pour un total de 25...

J'ai cherché mais je n'ai rien trouvé à ce sujet.

D'où mes questions :

- Est ce "normal" ?

- Et surtout, existe-t-il un moyen d'avoir une hauteur de 28px (soit 25 + 3px) sur TOUS les navigateurs, y compris FF. Ou l'inverse...mais que ce soit uniforme.

Merci à tous.

Anthony

up

si quelqu'un peut m'aider..

merci d'avance.
Modifié par anthony57 (30 Oct 2008 - 09:52)

Poste ton css et html stp.

cahnory a écrit :
Poste ton css et html stp.

Ouch, ça va faire un long code si je post tout ça.

Voici le lien http://www.myspace4fun.net/v2/

Tu as donc l'html, et pour le css c'est ici http://www.myspace4fun.net/css/style_v2.css



Et ce qui pose problème, c'est le tableau central, sur IE, Chrome, Safari, Opera, etc.. la hauteur ne ligne n'inclue pas le border, et donc fait 25px + border de 3px.
Mais sur FF, elle fait 25px border inclu, et donc en réalité uniquement 22px...

Merci

En effet un peu long, disons que les portions qui pose problème suffirait...
Modifié par cahnory (30 Oct 2008 - 11:49)

cahnory a écrit :
En effet un peu long, disons que les portions qui pose problème suffirait...

le problème ne vient pas du CSS de toute manière, et encore moins de l'XHTML.

#corps .classement tr 
{

height : 25px;
border-top : solid #FFCC66 3px;

}

Voilà en gros la partie qui pose problème. Le souci c'est la différence d'interprétation des 25px + 3px comme expliqué précédemment.

Je dit peut-être une bêtise mais je pense que tu devrais plutôt mettre ton style sur le td et non le tr. Ensuite ce problème a apparemment déjà été soulevé ici :
http://forum.alsacreations.com/topic-4-35390-1-ResoluProbleme-Border-dans-un-tableau-sous-Firefox.html
La solution a été de définir le line-height, solution qui peut poser d'autre problème si tes td contiennent plus d'une ligne de texte, mais solution tout de même.
Sinon, en cherchant "hack css firefox" sur google je suis tombé sur cette méthode :

#corps .classement tr 
{
height : 25px;
border-top : solid #FFCC66 3px;
}

html:not([lang*=""]) #corps .classement tr 
{
height : 28px;
}

Même si les hack c'est pas la joie... source :
http://www.zonecss.fr/courscss/cours_feuille_css_31.html
Modifié par cahnory (30 Oct 2008 - 12:27)

cahnory a écrit :
Je dit peut-être une bêtise mais je pense que tu devrais plutôt mettre ton style sur le td et non le tr. Ensuite ce problème a apparemment déjà été soulevé ici :
http://forum.alsacreations.com/topic-4-35390-1-ResoluProbleme-Border-dans-un-tableau-sous-Firefox.html
La solution a été de définir le line-height, solution qui peut poser d'autre problème si tes td contiennent plus d'une ligne de texte, mais solution tout de même.
Sinon, en cherchant "hack css firefox" sur google je suis tombé sur cette méthode :

#corps .classement tr 
{
height : 25px;
border-top : solid #FFCC66 3px;
}

html:not([lang*=""]) #corps .classement tr 
{
height : 28px;
}

Même si les hack c'est pas la joie... source :
http://www.zonecss.fr/courscss/cours_feuille_css_31.html

Merci pour la réponse.

Alors j'ai essayé de mettre le style sur le td déjà, et le problème est identique.

Pour le line-height, j'ai beaucoup de mal avec cet attribut, il a un comportement qui je ne maitrise pas bien, au point de n'avoir aucune différence si il est présent ou pas sur certains navigateur.
Mais j'essaierai.

Je vais lire tout ça.. et voir si le hack est la seule solution. Mais c'est jamais le top, c'est clair..

Merci bien en tout cas

Plutôt que de se lancer dans un hack (saimal), on peut aussi considérer que cette différence n'a pas une grande importance et laisser courir.

Mieux encore, tu pourrais ne pas utiliser de hauteur pour tes cellules de tableau, et privilégier du padding pour aérer les contenus des cellules. Par exemple, remplacer le height: 25px par un padding: 4px 0;, qui me semble plus logique.

Florent V. a écrit :
Plutôt que de se lancer dans un hack (saimal), on peut aussi considérer que cette différence n'a pas une grande importance et laisser courir.

oui, je sais bien, ça n'a presque qu'aucune influence...mais je suis sans doute trop perfectionniste. Et j'aime comprendre, car ce comportement n'est pas logique, surprenant venant de FF.

Florent V. a écrit :
Mieux encore, tu pourrais ne pas utiliser de hauteur pour tes cellules de tableau, et privilégier du padding pour aérer les contenus des cellules. Par exemple, remplacer le height: 25px par un padding: 4px 0;, qui me semble plus logique.

oui et non.. c'est sur que ça semble plus logique avec un padding...mais quid des TD sur 2 lignes ?

bah tu te met un line-height:15px (1px de plus que le line-height de base pour un texte de 12px il me semble) et ton padding:5px 0;

cahnory a écrit :
bah tu te met un line-height:15px (1px de plus que le line-height de base pour un texte de 12px il me semble) et ton padding:5px 0;

Comme dit précédemment, le line-height fonctionne mal.

Exemple, sur un input text classique, tu met un line-height:3em : aucune réaction sur IE et FF, mais alors sur Safari et Chrome, là oui, ça fait vraiment 3em.

Et d'une manière général, le line-height ne se comporte jamais comme je veux.
Modifié par anthony57 (30 Oct 2008 - 13:21)

anthony57 a écrit :
oui et non.. c'est sur que ça semble plus logique avec un padding...mais quid des TD sur 2 lignes ?

Eh bien ils feront 2H + 8px, où H est la hauteur de ligne (16px dans mon test), au lieu de 1H + 8px. Ce qui me semble plus intéressant que d'avoir des hauteurs de ligne de 25px et donc des cellules de 50px de haut si contenu sur deux lignes.