[XHTML] Défi XHTML 1.1 - Est-ce impossible?

Version imprimable

Bonjour à tous,

Ca fait un moment que je lutte avec ces div !!! Impossible d'arriver à un résultat équivalent entre IE et firefox !!
Que je mette la DTD ET/OU le prologue XML OU rien du tout, rien ne fonctionne comme je voudrais...
Soit... : des divs imbriqués avec des padding pour espacer les bordures du texte, un tableau de 2 cellules à l'intérieur qui prends 100% du div (moins le padding et les bordures) avec un cellpadding pour espacer également les 2 champs text, et donc ces 2 champs texte qui prennent toute la taille du tableau (moins le cellpadding).
Bizarement, le résultat que je voudrais, j'arrive à l'obtenir seulement dans le quirkmode de firefox (sans aucune DTD)... même le quirkmode de IE déconne... Et je parle même pas de lorsque je met une DTD...

Donc voici le défit si quelqu'un est capable de me faire une page XHTML 1.1 compatible tout navigateur, de ce pauvre code :
Code:

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 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Test</title> <style type="text/css"> html, body, form { width: 100%; height: 100%; margin: 0px; padding: 0px; } </style> </head> <body> <form id="aspnetForm"> <div style="border: dashed 2px #ff0000; margin: 0px; padding: 10px;"> <div style="border: dashed 2px #ff0000; padding: 2px;"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td style="width: 50%;"> Titre 1 </td> <td style="width: 50%;"> Titre 2 </td> </tr> </table> </div> <div style="padding: 2px; border-bottom: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-right: dashed 2px #ff0000;"> <table border="0" cellpadding="0" cellspacing="2" style="width: 100%;"> <tr> <td> <input type="text" style="width: 100%;" /> </td> <td> <input type="text" style="width: 100%;" /> </td> </tr> </table> </div> </div> </form> </body> </html>
Je précise que je suis obligé d'utiliser des tableaux à 100% en taille à l'intérieur des divs...

Bon courage, j'ai essayé des milliers de possibilités sans jamais arriver à un code compatible XHTML 1.1 sur Firefox ET Internet Explorer sas avoir les champs text tronqués ou qui dépassent du tableau ou des divs, sans que le div de base prenne plus de 100% de la page, ect... !

Celui qui réussit, je m'inclinerai devant lui car j'ai vraiment tout essayé et ça fait déjà 10 ans que je développe des sites Internet...

J'éspère que quelqu'un trouvera car je désespère...

Merci d'avance et bonne chance !

05/09/2006, 11h32
MasterOfChakhaL
A part ces deux détails, ta page est valide xhtml 1.1...

il te manque le doctype en première ligne de ta page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Il te manque également l'attribut action dans la balise form
Code:

1 2 <form id="myForm" action="truc.asp" > ...
06/09/2006, 10h46
Anksunamon

Merci pour ta réponse,

Pour que ma page soit valide XHTML 1.1 ça pas de problème...

Ce que je demande, c'est que le rendu de ce petit code soit identique sur tous les navigateurs, chose que je n'arrive pas à faire en ayant vraiment tout tester...

Quelqu'un en est-il capable?
06/09/2006, 13h59
fallais

Joue avec le CSS, c'est la difference en IE et FF :)
De plus met tout ton CSS dans une feuille de style c'est mieu ( style.css par exemple :) )

Voila :)
06/09/2006, 14h23
Anksunamon

Je met les styles dans un css séparé normalement, la c'était juste pour tout mettre sur une page htm pour que vous puissiez faire un copier-coller du code et le modifier en ligne...

J'ai joué avec le css mais j'ai jamais réussis à avoir le mm rendu avec IE ET Firefox...

1 pièce(s) jointe(s)

Salut,

A part les inputs qui me font m'arracher les cheveux depuis hier, j'ai l'impression d'obtenir un résultat similaire sur ie6 firefox 1.5 et opera 9

Le code est valide xhtml 1.1
Le css a lui aussi passé la validation du w3c

Je te propose de faire tes tests avec ceci en espérant que, même si ce n'est pas une solution totale, ca pourra te faire avancer dans ton travail...

Trève de suspense...

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Test</title>
    <style type="text/css">
        * {
                margin: 0;
                padding: 0;
        }
 
        body {
                width: 100%;
        }
 
        form {
                border: 2px dashed red;
                padding: 10px;
        }
 
        table {
                width: 100%;
                border-collapse: collapse
        }
        tr {
                
        }
        td {
                padding: 2px;
                width: 50%;
                border: 2px dashed red;
        }
        input {
                width: 90%;
        }
 
        .gauche {
                border-right: none;
        }
        .droite {
                border-left: none;
        }
        </style>
</head>
<body>
	<form action="truc.asp" method="post">
		<table>
			<tr>
				<td class="gauche">
					<label for="un">Titre 1</label>
				</td>
				<td class="droite">
					<label for="deux">Titre 2</label>
				</td>
			</tr>
			<tr>
				<td class="gauche">
					<input id="un" type="text" />
				</td>
				<td class="droite">
					<input id="deux" type="text" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

une petite capture de ce que j'obtiens chez moi
Pièce jointe 4490

06/09/2006, 15h41
Anksunamon

Merci beaucoup pour ta réponse...

Effectivement avec des tableaux on peux faire tout ce qu'on veut !
J'y suis toujours arrivé, mais la j'essayais de faire pareil avec des "div".

Merci pour ta solution qui utilise des tableaux... Mais est-ce possible de faire pareil avec des divs?