Problème avec Doctypes et bordures personnelles

**Erakis** · 16/07/2007, 18h06

Bonjour à tous,

Je dois placer une bordure autour d'un certain contenu. Tout d'abord, j'ai créer un carré avec des coins arrondi à l'aide de photoshop. Ensuite j'ai générer les 9 tranches nécessaires. Voilà maintenant un bout du code HTML :

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
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
<title>Sans titre-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td style="background-image: url(images/DocTypes-Test_01.jpg); background-repeat: no-repeat; height :33; width :33;">
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_02.jpg); background-repeat: repeat-x; height :33;">
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_03.jpg); background-repeat: no-repeat; height :33; width :33;">
		&nbsp;</td>
</tr>
</table>	
<table width="100%" border="1" cellpadding="0" cellspacing="0">	
<tr>
	<td style="background-image: url(images/DocTypes-Test_04.jpg); background-repeat: repeat-y; width :34;">
		&nbsp;</td>
	<td>
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_06.jpg); background-repeat: repeat-y; width :33;">
		&nbsp;</td>
</tr>
</table>	
<table width="100%" border="1" cellpadding="0" cellspacing="0">	
<tr>
	<td style="background-image: url(images/DocTypes-Test_07.jpg); background-repeat: no-repeat; height :33; width :33;">
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_08.jpg); background-repeat: repeat-x; height :33;">
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_09.jpg); background-repeat: no-repeat; height :33; width :33;">
		&nbsp;</td>
</tr>
</table>
 
 
</body>
</html>

Tout fonctionne à merveille...
Cependant, insérer un DOCTYPE et tout foire. Par exemple, celui-ci :

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Pour corriger le nouveau problème lié à l'ajout du DOCTYPE, je dois spécifier la largeur des cellule fixe à l'aide de l'attribut width de la table et non à l'aide du CSS inline et ce pour la première table et pour la dernière.

Code :

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

1
2
3
4
5
6
7
8
9
10
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td style="background-image: url(images/DocTypes-Test_01.jpg); background-repeat: no-repeat; height :33; width :33;" width="33">
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_02.jpg); background-repeat: repeat-x; height :33;">
		&nbsp;</td>
	<td style="background-image: url(images/DocTypes-Test_03.jpg); background-repeat: no-repeat; height :33; width :33;" width="33">
		&nbsp;</td>
</tr>
</table>

Pourtant, les deux ne sont pas supposé faire la même chose ??? Je suis un peu perdu là....

PS : Je sais que j'aurais pu réaliser tout cela avec une seule table sachant que les taille des cellules sont les mêmes. Sauf que ceci n'est que pour démontrer mon problème. Mon contour personnel lui n'est pas aussi simple.

**Bisûnûrs** · 16/07/2007, 18h16

En CSS l'unité est obligatoire pour les valeurs de grandeur.

Code css :

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

width:33px;

et non pas

Code css :

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

width:33;

**Strix** · 16/07/2007, 18h22

Salut.

Mis à part le 33px, pour ton body :

Code :

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

<body style="background-color:#fff; margin:0;">

et dans head

Code :

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

charset=iso-8859-1" />

**Erakis** · 16/07/2007, 18h23

Eh un gros merci !
Cela fonctionne très bien maintenant

Problème avec Doctypes et bordures personnelles

HTML

Discussions similaires

Partager

Partager