CSS vs Me (Help?)

[Morty]

Je cherche à comprendre quelles sont les subtilités de ce langage relativement barbare, et certaines différences entre navigateurs me laissent pantois. En particulier les espaces et les tailles de police (FF afficherait des polices plus petites que IE ?). Je cherche donc à résoudre ce petit pépin :

Sous Internet Explorer 6 :

(Remarquez le beau bandeau blanc en dessous)

Sous Firefox :


J'essaie aussi de m'expliquer la différence (ici en noir) au niveau des cadres détectés par l'inspecteur de FF.


Le code de la feuille CSS :

code : Tout sélectionner

body {
    font-family: Georgia;
    font-size: small;
    height: 100%;
    margin: 0px;
    padding: 0px;
    text-align: justify;
}

a {
    color: #ff8000;
    font-family: Georgia;
    font-size: small;
    text-decoration: none;
}

div {
    border-style: dashed;
    border-width: 1px;
    margin: 0px;
    padding: 0px;
}

#logo {
    border-style: none;
    height: 120px;
    left: 20px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 10px;
    width: 420px;
}

#title {
    border-style: none;
    bottom: auto;
    color: #ff0000;
    font-size: 14pt;
    height: auto;
    left: auto;
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 10px;
    text-align: right;
    top: 60px;
    width: auto;
}

#menu {
    border-style: ridge;
    color: black;
    font-family: Georgia;
    font-size: medium;
    left: 5px;
    line-height: 1.2em;
    margin: 0px;
    padding: 5px;
    position: absolute;
    text-align: right;
    text-decoration: none;
    top: 200px;
    width: 17%;
}

#menu table {
    margin: 0px;
    padding: 0px;
    text-align: right;
}

#menu .button {
    text-align: center;
}

#menu h1 {
    color: black;
    font-size: 14pt;
    font-weight: bolder;
    text-align: center;
}

#stats {
    border-style: ridge;
    font-size: 10pt;
    height: auto;
    position: absolute;
    right: 10px;
    top: 380px;
    width: 15%;
}

#main {
    font-size: small;
    left: 19%;
    position: absolute;
    right: 50px;
    top: 145px;
    width: 64%;
}

#main a {
    background-color: transparent;
    color: #000000;
    cursor: pointer;
    font-size: small;
    text-decoration: none;
}

#main table {
    border-style: none;
    font-size: small;
    text-align: center;
}

#main tr {
    border-style: none;
}

#main td {
    border-collapse: collapse;
    border-style: ridge;
    border-width: 1px;
}

#main img {
    height: 24px;
    width: 24px;
}

Question subsidiaire, quelqu'un a déjà forcé le téléchargement d'une police ? (Sous IE en .eol).

Merci d'avance pour vos idées.

[Kuro]

Je pense que tu devrais aussi poster le code html de ton formulaire, difficile de savoir quelle classe correspond à quel élément sans ça.

Pour avoir moins de problèmes avec la taille des polices je te conseille de définir la taille par défaut en % dans html, puis de préciser qu'elle est de 1em dans body, et au cas par cas déterminer cette même taille en em pour tel ou tel élément. Exemple :

html { font-size: 80%; }
body { font-size: 1em; }
h1 { font-size: 1.5em; }
#small { font-size: 0.5em; }

[Morty]

Je commence à mieux comprendre les em. Merci pour l'éclaircissement !

Pour le code de la page, je vais tâcher de reproduire les balises :

code : Tout sélectionner

Index.php
<body>
    <div id=menu>
        <?php
            //Cadre de gauche : Identification ou navigation
            include "menu.php";
        ?>
    </div>

Menu.php
include login.php

Login.php
<form method="post" name="ConnectForm" action="index.php">
<table class="connect">
 <tr>
  <td>
    Login
  </td>
  <td>
    <input type="text" name="login" size="10">
  </td>
 </tr>
 <tr>
  <td>
   Password
  </td>
  <td>
   <input type="password" name="password" size="10">
  </td>
 </tr>
 <tr>
  <td class="button" colspan="2">
   <input type="Submit" value="Connecter">
  </td>
 </tr>
</table>
</form>

[e-t172]

Tu sais, tu peux aussi poster directement la source HTML que te donne ton navigateur au de poster le PHP avec (et, accessoirement, passer pour un con).

[Morty]

Tu sais, tu peux aussi poster directement la source HTML que te donne ton navigateur au de poster le PHP avec (et, accessoirement, passer pour un con).

Bien sûr que je peux le faire, merci e-t. Sauf que le nombre de coupes à faire dans mon html était plus important alors j'ai préféré montrer qu'il y avait un peu de php dans le tas.

H.S. : C'est moi ou l'Asile t'a rendu insolent ? (Rappelle-toi ton assertion sur le max_fps des serveurs HL(2))

[e-t172]

H.S. : C'est moi ou l'Asile t'a rendu insolent ? (Rappelle-toi ton assertion sur le max_fps des serveurs HL(2))

C'est l'Asile ici. Tout le monde se traite de connard sans raison, alors le fait que j'insinue que tu passes pour un con, à côté, c'est pas grand chose. Prends ça comme une marque d'affection.

[Morty]

Merci pour ta remarque alors, connard.

[Kuro]

La seule raison que je vois c'est que comme tu n'as pas précisé les valeurs "padding" et "margin" de ton tableau, et de tes cellules, IE et Firefox y mettent leur valeur par défaut, et elles sont différentes... Je ne vois pas ce que ça peut être d'autre.

Maintenant... il y a un conseil qui va sans doute t'énerver, mais je le donne au cas où, si tu comptes développer en html + css pour le style, tu devrais essayer de produire un code plus conforme et plus sémantique :
- normalement les tableaux ne doivent servir que pour... les tableaux et pas pour structurer le contenu de tes pages.
- remplace les attributs "name" par des attributs "id" (sauf dans le cas des ancres, car IE pourrait bien ne plus les voir)
- ferme tes balises.

Ca devrait donner

code : Tout sélectionner

<form method="post" id="ConnectForm" action="index.php">
    <fieldset>
        <legend><!--optionnel--></legend>
        <label for="login">Login</label>
        <input type="text" id="login" size="10" />
        <label for="password">Password</label>
        <input type="password" id="password" size="10" />
        <input type="Submit" value="Connecter" />
    </fieldset>
</form>

Eventuellement si tu as besoin de plus de structure pour le style, tu peux utiliser quelquechose de sémantiquement correct ou acceptable et accessible, e.g. une liste en t'inspirant de cet article (attention quand même il utilise pas mal de tours de passe-passe pour arriver à son but)

code : Tout sélectionner

<form method="post" id="ConnectForm" action="index.php">
    <fieldset>
        <legend><!--optionnel--></legend>
        <ul>
            <li>
                <label for="login">Login</label>
                <input type="text" id="login" size="10" />
            </li>
            <li>
                <label for="password">Password</label>
                <input type="password" id="password" size="10" />
            </li>
            <li>
                <input type="Submit" value="Connecter" />
            </li>
        </ul>
    </fieldset>
</form>

[Morty]

Je suis justement en train de réécrire ces pages pour les rendre plus standards. Pour les padding et margin, je pensais bien les avoir mises à zéro, mais peut-être pas assez (table+tr+td?). Je n'ai pas besoin d'ancres donc je peux les remplacer, et ça ne m'énerve pas, juste que j'essaie de faire l'interfaçage BDD/Site, et que le design n'est pas mon fort donc pour les CSS j'ai l'impression de perdre un peu mon temps. La page donnée est justement un mauvais exemple, je suis en train de remplacer les tableaux de mise en forme par de la mise en forme en elle-même. Si je remplace le name par du id, est-ce que ma variable $_POST reconnaîtra les éléments quand même ? Et pour la fermeture des balises, je dois avouer que je ne suis pas encore rôdé pour les balises en />.

Merci beaucoup !

[Kuro]

Pour les padding et margin, je pensais bien les avoir mises à zéro, mais peut-être pas assez (table+tr+td?).

Dans ton css je ne vois pas l'endroit où tu indiques quoi que ce soit pour les marges de ton tableau. Mais à priori ça doit venir de ça, j'ai pas fouillé énormément

Si je remplace le name par du id, est-ce que ma variable $_POST reconnaîtra les éléments quand même ?

Je vais un peu vite en besogne : si c'est du html 4 que tu sers au navigateur, il vaut mieux utiliser les deux attributs, id et name. A partir du xhtml 1 le name est normalement déprécié au profit de id mais il me semble qu'il marche encore.

[Morty]

Si je remplace le name par du id, est-ce que ma variable $_POST reconnaîtra les éléments quand même ?

Je viens d'essayer, et en effet, PHP ne reconnaît plus les noms de champs à la validation. Mais ça a plus de style déjà.

[Morty]

Je vais un peu vite en besogne : si c'est du html 4 que tu sers au navigateur, il vaut mieux utiliser les deux attributs, id et name. A partir du xhtml 1 le name est normalement déprécié au profit de id mais il me semble qu'il marche encore.

J'essayais de faire du XHTML 1, mais c'est drôlement long pour rationnaliser le PHP, puis s'attaquer au (X)HTML et je dois avouer que je passe par le validator pour corriger mes pages.

[Kuro]

Après vérification, pour tes éléments de formulaire (input select et tout ça) l'usage veut qu'on mette les deux attributs, "id" et "name", avec la même valeur.

[e-t172]

La différence notable entre id et name étant au niveau des labels et des boutons radio : tous les boutons radio d'un même groupe ont le même name (pour les rassembler), mais pas le même id, pour que chacun d'entre eux puisse être référencé par un <label for="id">.

[Kuro]

Oui merci pour la précision.
J'ai toujours un doute sur la validité de name dans les éléments de formulaire en xhtml, et à chaque fois je dois vérifier...

<!ATTLIST %input.qname;
%Common.attrib;
type %InputType.class; 'text'
name CDATA #IMPLIED
value CDATA #IMPLIED
checked ( checked ) #IMPLIED
size %Number.datatype; #IMPLIED
maxlength %Number.datatype; #IMPLIED
src %URI.datatype; #IMPLIED
tabindex %Number.datatype; #IMPLIED
accesskey %Character.datatype; #IMPLIED
>
<!-- end of input.attlist -->]]>

[Morty]

C'était plus stylé oui, mais c'était avant de lancer IExploder.

FF :

IE :

Et le texte de ma page principale ne s'affiche pas sous IE...

Quelle horreur...