Height et Border sur TD

**maff** · 28/02/2008, 15h20

Bonjour à tous,

J'ai beau chercher je ne trouve aucun sujet traitant de la question:

Je fixe une hauteur à une cellule, ainsi qu'une bordure.

-> Firefox inclut la taille des bordures dans la cellule (place les bordures à l'intérieur)
-> IE fait l'inverse

J'ai beau utiliser tous les DTD possibles, j'ai toujours cette différence..

Connaissez-vous un moyen d'y remédier ?

Merci pour vos réponses

**12monkeys** · 28/02/2008, 16h29

Hello

Tu peut nous montrer ton code ?

J'ai fait ce test et j'ai la bordure rouge à l'interieur dans les deux, ou alors j'ai pas compris ton problème ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Admi</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
</head>
 
<body id="autre">
 
<table border="1">
  <tr>
    <td style="height:30px;border:1px solid red">
teste
    </td>
  </tr>
</table>
 
</body>
</html>

**maff** · 28/02/2008, 17h00

Hello, et merci pour ta réponse.

Je te mets un bout de code en exemple, mais je vais surtout mieux explique mon problème.

En gros sur une cellule de 20px de hauteur et 1px de border, la taille totale de la cellule (border comprise), après mesure sur capture d'écran, diffère en fonction des navigateurs.

Sur IE, elle va faire 22px (20px à l'intérieur + 2 x 1px pour les bordures)
Sur FF, elle ne fera que 20px (18px à l'intérieur + 2 x 1px pour les bordures)

En gros FF intègre la taille des bordures dans la taille de la cellule, et pas IE.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
    table{
        border-style: none;
    }
    td{
        height:100px;
        width: 100px;
        border: 1px solid #FF0000;
    }
</style>
</head>
 
<body id="autre">
 
<table cellpadding="0" cellspacing="0">
  <tr>
    <td>test</td>
  </tr>
</table>
 
</body>
</html>

**12monkeys** · 28/02/2008, 17h20

En effet

c'est que microsoft ne respecte pas le modèle des boites standard recommandé par le W3C. (je pensais que IE7 avait réglé ce souci...)

Pour régler ce problème utilise des commentaires conditionnels pour IE, comme ça tu aura un style pour IE et un style pour les autre navigateurs...

Height et Border sur TD

CSS

Discussions similaires

Partager

Partager