1 Dernière modification par Morty (17-07-2006 12:07:23)

Sujet : CSS vs Me (Help?)

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 :
http://pix.nofrag.com/38/2b/d276623664c605e7b6a1c2fd6e38.jpg
(Remarquez le beau bandeau blanc en dessous)

Sous Firefox :
http://pix.nofrag.com/7f/76/858655c91774766cf686bd4d6195.jpg

J'essaie aussi de m'expliquer la différence (ici en noir) au niveau des cadres détectés par l'inspecteur de FF.
http://pix.nofrag.com/00/e7/7d684d5b1a583551f8c138dcb5c1.jpg

Le code de la feuille CSS :

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.

2

Re : CSS vs Me (Help?)

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; }

"World goin' one way, people another" Poot

3

Re : CSS vs Me (Help?)

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

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

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>

4

Re : CSS vs Me (Help?)

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).

5 Dernière modification par Morty (17-07-2006 14:01:00)

Re : CSS vs Me (Help?)

e-t172 a écrit:

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))

6

Re : CSS vs Me (Help?)

Morty a écrit:

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.

7

Re : CSS vs Me (Help?)

Merci pour ta remarque alors, connard.

8 Dernière modification par Kuro (19-07-2006 10:38:27)

Re : CSS vs Me (Help?)

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

<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)

<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>
"World goin' one way, people another" Poot

9

Re : CSS vs Me (Help?)

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 !

10

Re : CSS vs Me (Help?)

Morty a écrit:

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

Morty a écrit:

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.

"World goin' one way, people another" Poot

11

Re : CSS vs Me (Help?)

Morty a écrit:

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à.

12 Dernière modification par Morty (19-07-2006 15:41:44)

Re : CSS vs Me (Help?)

Kuro a écrit:

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.

13 Dernière modification par Kuro (19-07-2006 16:04:26)

Re : CSS vs Me (Help?)

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.

"World goin' one way, people another" Poot

14

Re : CSS vs Me (Help?)

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">.

15

Re : CSS vs Me (Help?)

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 -->]]>

"World goin' one way, people another" Poot

16

Re : CSS vs Me (Help?)

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

FF : http://pix.nofrag.com/76/00/759848c3769fe3e0bf64ce83c7c6.jpg

IE : http://pix.nofrag.com/93/42/3545ee1f8befdb12d767ebbc1414t.jpg

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

Quelle horreur...