PB de validation pour une partie de code.

[Grantome]

Salut,

Bon, voici le code :

<form method="get" action="http://www.google.com/custom">
<p>
<input type="hidden" name="domains" value="www.castlemaniac.com"></input>
<img src="http://www.castlemaniac.com/images/puce.gif" title="" alt="" />  Rechercher<br />
<input type="text" name="q" size="15" maxlength="255" value=""></input>
<input type="hidden" name="sitesearch" value="www.castlemaniac.com"></input>
<input type="hidden" name="client" value="pub-xxxxxxxxxxxxxxxxx"></input>

<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="xxxxxxxxxxxxx"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="xxxxxxxxx"></input>
</p>
</form>

Mon pb et que pour la validation XHTML 1.1 strict, j'ai du placer une balise p dans le form afin d'accpter les input.

Maintenant, cette balise p décale mon titre de 60px vers la droite, mais uniquement sous IE, pas sous FF.

Que faire pour lui faire retrouver sa place ?

Page : www.castlemaniac.com

Merci

[lupucide]

Tu peux commencer en fermant correctement tes balises <input />. Ensuite évite l'utilisation de <br />, préfère plutôt l'utilisation de <p> quitte à en placer plusieurs.

Modifié 13 Juin 2005 par lupucide

[Grantome]

Tu peux commencer en fermant correctement tes balises <input />. Ensuite évite l'utilisation de <br />, préfère plutôt l'utilisation de <p> quitte à en placer plusieurs.

<{POST_SNAPBACK}>

C'est fait pour les input, c'est juste que je teste plusieurs méthode...

Par contre pour le <br /> je ne vois pas pourquoi je doit placer un p, c'est un retour chariot, pas un nouveau paragraphe.

Pour la page, c'est thhp://www.castlemaniac.com/index.php

[Dudu]

Je ne vois aucun décalage sur la page, mais c'est certainement un problème de CSS. Aucun attribut n'est dédié au balises <p>, ce qui veut dire que la CSS navigateur (celle qui est, en local, installée par défaut sur ton navigateur) va prendre le dessus et attribuer aux <p> les marges intérieures et extérieures par défaut.

En remplaçant le <p> par un <p style="margin:0;padding:0"> çà devrait remettre tout à la normale.

Ou bien si tu utilises plusieurs <p> comme le conseille lupucide, écris un <p class="LeNomDeTaClasse"> et associe dans la CSS les RAZ des marges

[Grantome]

J'utilise ceci dans mon css

p:first-letter
{
margin-top:0px;
margin-bottom:0px;
margin-left:60px;
}

Et sur FF tout va bien, mais sous IE, le mot Rechercher du menu de gauche est décalé de 60px

Bon, en faisant une class spécial pour ce p avec un margin-left de 0px, c'est bon.

Merci.

Modifié 14 Juin 2005 par Grantome

[Dudu]

Le problème a l'air réglé donc tant mieux

Cela étant, il est possible que la déclaration xml en 1ère ligne fasse passer IE en quirks mode, impliquant par conséquent quelques approximations au niveau du rendu.

Également, le code est un peu étrange pour du xhtml 1.1 Strict. L'HTML contient de nombreuses annotations liées à la présentation. Je n'ai regardé que le menu de gauche et 2 choses me choquent quelque peu:

- ce n'est pas une liste, et chaque ligne répète l'image 'puce.gif'

- les espaces insécables entre la puce et le texte pourraient avantageusement être remplacées en CSS

Pourquoi je dis çà ? Parce que certainement ce genre de problèmes ne serait apparu si le menu possédait une sémantique digne du doctype utilisé

[Grantome]

Pour la liste, elle n'es pas en prod, car j'ai un pb de mise en page, j'ai donc eu pour le moement recours à ce supterfuge.

Elle sera placée dès que possible au format XHTML 1.1 strict associé au CSS.