Pb css qui marche QUE sous Mozilla

[ideezik]

Je code une nouvelle version de mon site en xhtml et css. Ca passe nickel sur firefox mais sous IE et Opera ca me décale tout mon menu :cry:
Si y'avait un gentil qui lui aussi est passé par là il y'a quelque temps...

urls :

version actuelle : -www.ideezik.com
v2 : -www.ideezik.com/v2
css : -www.ideezik.com/v2/style_index.css

Dire que je recode tout pour standardiser ! :wink:

David

 

[George Abitbol]

Par défaut IE met un margin sur les listes. Mets le à 0 (ou à la valeur qui te convient).

Fred

 

[ideezik]

Nickel ! Merci Fred.

Il mettrais pas aussi une marge plus importante en bas ? Parce que pareil, sous mozilla j'ai bien la hauteur que je veux mais IE m'ajoute une espece de marge en bas...

David

 

[BadProcESs]

T'a essayé de regarder du côté de la propriété padding (bordure intérieure) également ?

 

[ideezik]

La classe pour les menus qui merdent sous IE :

.menu_fond_orange {
background-image: url(img/menu_orange.gif);
width: 127px;
height: 20px;
padding-bottom: 0px;
padding-left: 8px;
padding-top: 5px;
margin: 0;
}

C'est un <div> Ca marche nickel sous momo mais IE me fait une vilaine marge en dessous du textbox :x
Y'a pas une propriété que j'aurais oublié ?

David

 

[BadProcESs]

remplace margin: 0; par margin: 0px; IE s'emmèle les pinceaux ce n'est pas spécifié (j'en ai fait les frais).

 

[ideezik]

J'ai changé tant qu'a faire (pour pas m'arracher les cheveux sur un bug incompréhensible un jour !) mais ca résoud pas mon problème...
Ouah... j'ai refait un test sur Opera c'est horrible ! Standard, standard... mon site en html codé à la barbare passait nickel ! Y'a de quoi déprimer :x
Allez, je persévère !!!

David

 

[BadProcESs]

Tu vas y arriver... Regarde mon site, full XHTML 1.0 Strict (même si j'ai un peu tricher parfois en utilisant quelques cadres).

 

[ideezik]

Dans quoi il faut mettre une balise <input /> en xhtml pour que ca passe au validateur et que ca mette pas la mise en page en l'air ?
J'ai essayé <p><input /></p> mais ca marche pas super...
Vous faites comment de votre côté :?:

David

 

[BadProcESs]

C'est quoi cette balise vide ? Ca sert à rien de la mettre ??!

 

[ideezik]

Je suis tout à fait d'accord avec toi ! Mais quand je met juste : <input /> le validateur me mets :

Line 35, column 49: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
<input type="hidden" id="order" value="date" />

Donc je cherche une solution.... :?

David

 

[Monique]

Bonjour,

Tu as essayé en utilisant fieldset pour grouper tes champs ?
Exemples :
- http://openweb.eu.org/articles/formulaire_accessible/
- http://www.themaninblue.com/experiment/InForm/

Amicalement,
Monique

 

[ideezik]

Je m'étais basé sur les sources d'openweb pour faire le formulaire mais ca passe pas au validateur...
C'est lourd ! Tout ce que je veux faire c'est mettre un <form> et des <input> dans un <div> mais la mise en page varie en fonction de tous les navigateurs ! IE, Firefox et Opera : trois mises en page différente !
Arghhh.... :x

David

 

[Monique]

Je me demande si la cause de tes problèmes d'affichage ne sont pas dû aux images de fondqui appartiennent à deux parties différentes : le bas d'un bloc et le haut du suivant... ce qui vraisemblablement ne correspond pas aux blocs <div>.

Pourquoi n'utilises-tu pas un <div> pour chaque partie, avec une couleur de fond et une bordure plutôt que des images, de même que le titre en texte ?
Ce qui serait préférable pour l'accessibilité.

Amicalement,
Monique

 

[ideezik]

J'ai réussi ! Yeeepeee !

Résultat des courses, c'était les balises <p> et <form> qui me faisait des marges !

p {
padding: 0px;
margin: 0px;
}

form{
padding: 0px;
margin: 0px;
}

Avec ca en plus, ca passe nickel sous firefox et IE6. Je dl Opera, il va bien me faire un autre bug, je lui fait confiance !

David