Border-spacing vs IE

**Jimmy Monkey** · 29/10/2007, 17h45

Bonjour,

Depuis que je code en XHTML et CSS, je crée uniquement la mise en page de mes sites avec des divs. Conséquemment, j’ai récemment décidé de me familiariser davantage avec les tables pour élargir mes horizons. Malheureusement, en m'exerçant, j’ai rencontré le problème suivant : la propriété border-spacing ne fonctionne que sous Firefox. Y connaissez-vous une mesure palliative pour Internet Explorer afin que les cellules soient espacées?

Voici mon code avec divs (XHTML) :

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Un site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mLeft">
Blablabla
</div>
<div id="mRight">
Blablabla
</div>
<div id="mMiddle">
Blablabla
</div>
</body>
</html>

... et mon code avec divs (CSS) :

Code :

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
29
30
#mMiddle
{
background-color:rgb(235,235,235);
border:1px gray dotted;
left:23.5%;
padding:1.5%;
position:fixed;
width:50%;
}
 
#mLeft
{
background-color:rgb(235,235,235);
border:1px gray dotted;
padding:1.5%;
left:0.5%;
padding:1.5%;
position:fixed;
width:17.5%;
}
 
#mRight
{
background-color:rgb(235,235,235);
border:1px gray dotted;
right:0.5%;
padding:1.5%;
position:fixed;
width:17.5%;
}

------------------------------------------------------------------------------

Voici mon code avec la table (XHTML) :

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Un site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table id="tForeground">
<tr>
<td id="tLeft">Blablablabla</td>
<td id="tMiddle">Blablablabla</td>
<td id="tRight">Blablablabla</td>
</tr>
</table>
</body>
</html>

Voilà mon code avec la table (CSS) :

Code :

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
#tForeground
{
border-spacing:15px;
position:absolute;
top:100px;
width:98%;
}
 
#tForeground td
{
background-color:rgb(235,235,235);
border:1px gray dotted;
}
 
#tMiddle
{
padding-left:1.5%;
padding-right:1.5%;
}
 
#tLeft
{
padding-left:1.5%;
padding-right:1.5%;
width:17.5%;
}

Merci beaucoup !

**mLk92** · 30/10/2007, 14h15

Pour espacer deux div, j'espère que tu ne cherche pas à utilisé leur border-spacing

margin ? padding ?

Coder avec des tables ou avec des div revient au même, il faut juste se dire que la table = div. et que les td ou tr sont des paragraphes.

m'enfin pourquoi une telle regression

**mael94420** · 30/10/2007, 23h53

Merci mLk92

Je suis d'accord avec toi pour les tables A MORT !!! sauf quand on fait des tableaux de données biensur

j’ai récemment décidé de me familiariser davantage avec les tables pour élargir mes horizons

Jimmy Monkey, ca me fait rire cette pitite phrase. Juste pour informations. Le webdesign réalisé avec des tableaux est à banir pour la simple est bonne raison que les navigateurs basique, les outils de lecture d'écran, de retranscription sur clavier qui servent généralement aux personnes mal voyantes s'enmele les pédales dans tous ces tr td. C'est pourquoi, la simplicité de lecture de petits éléments html bien choisit et adéquat est fortement recommandé. Tu ne voudrais pas payé 3000 euros pour une demande de label d'accessibilité et te faire renvoyer d'ou tu vient. Je plaisante mais c'est très important l'accessibilité. Les feuiles de styles ont été mis en place principalement pour ca outre le fait d'alleger le code HTML.

Il faut donc te renseigner ci se n'est déjà fait sur l'utilisation exacte de chaque élément HTML. Rien ne sert de mettre des div partout quand on veut un paragraphe placé à un endroit précis ou encore pour une image. Je te dit ca mais je le dit à tous ce qui lirons ce message et qui ne sont pas encore familiarisé avec l'accessibilité.

Cordialement et en éspérant te remettre dans le chemin linéaire d'une belle page HTML bien codé plutôt qu'un labyrinthe de balises de tableau.

Border-spacing vs IE

CSS

Vue hybride

Discussions similaires

Partager

Partager