Vous êtes dans la rubrioque Actualités 

Actualités

Johnny, le klebs des Chirac, la Princesse de Kokamo, etc.

Mars 08 25

Version imprimable Suggestions de corrections CSS iTheme


[Edit 25/03/2008] CSS corrigées [/Edit]

J'ai les fichiers "corrigés" de tous les styles externes relatifs à iTheme et ses variations. Transmis par mail à Mitra et Stéphane.

Dans le <style> interne au modèle, j'ai aussi fait des corrections. Par ex. rajouté des unités (px) là où il en fallait.


Dans : /public_images/skins/itheme/troiscol_milieu_fixe_1.css :

enlever les 2 lignes en rouge :
_position et _top ne correspondent pas à des propriétés CSS

 

#sidebar {

position: fixed;

_position: absolute;

top: 123px;

_top: 120px;

left: 3px;

}

 
VOIR AUSSI LES CSS DES AUTRES VARIANTES DU MODELE

Dans : /public_images/rating.css :

Ligne  26  : ce commentaire est-il utile ?
/*\*/

Ligne 28 : ce commentaire est-il utile ?
/* */
 
Ligne 85 : 
     //margin-top:-3px;
enlever la ligne, ou la remplacer par un vrai commentaire :
     /* margin-top:-3px;   */

Ligne 114 : propriété "padding-height" inconnue (seuls existent : -top, -bottom, -left, -right)
     padding-height:3px;
remplacer par .... ( A VOIR !!!)
     padding-top:3px 
 

Corrections HTML selon validateur w3c http://validator.w3.org

Balises <link etc. etc.> non auto-fermées. Il faut <link etc. etc.   />

Corrigé les déclarations du genre :
<if_option columns==deuxcol_gauche><link href="/public_images/skins/itheme/deuxcol_gauche.css" rel="stylesheet" type="text/css"></if_option>
en :
<if_option columns==deuxcol_gauche><link href="/public_images/skins/itheme/deuxcol_gauche.css" rel="stylesheet" type="text/css" /></if_option>


Nombreuses erreurs dues, selon le validateur, à un usage erroné de "Strict" alors qu'il aurait fallu "Transitional". Exemple : utilisation des attributs border=" " ou align=" " pour un tag <img>

Erreurs de niveau de balise :
Lorsqu'on met par ex. "<h3>" (etc.) dans un article ... comme l'article est encadré par <p> </p> dans le modèle ... (ceci est une supposition de Fix).


Corrections CSS selon validateur w3c http://jigsaw.w3.org 

(Nota : validation demandée avec CSS niveau 2.1)

Dans : /public_images/rating.css :

Nombreuses erreurs "manque une unité". Exemple : margin:0;

Erreur grammaticale background: url('/public_images/starrating_small.gif')
Fix : faut-il écrire url(/public_images/starrating_small.gif) ??? VERIFIER

Erreur grammaticale :  position: absolute;
Fix : le validateur exige-t-il qu'on écrive sans espace  position:absolute; ???
Idem erreurs signalée sur z-index: 1; 
Bizarre, car le "CSS validé" (des styles "dans" le modèle) ne bronche pas pour des déclarations z-index.

 

Erreur grammaticale ("pseudo-élément ou pseudo-classe :inline inconnue")  : display:inline;
Fix : euh ... ?? niveau CSS ??

Nombreux avertissements (27 ...) du genre :

La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #searchform #keyword et h1
Fix : euh ??? VERIFIER. Est ce que cela a une conséquence ?

Auteur de l'article Fix Rubrique Actualités Nombre de commentaires 4 commentaires Nombre de lectures Lu fois

Commenter Commenter

Commentaires

CSS dans le modèle - corrections

 25/03/2008 - 16h30

Ultimes corrections CSS "dans" le modèle (déclarations du genre 10 px ; il ne faut pas d'espace entre 10px et le point-virgule).

Reste "un seul" truc, signalé aussi bien par la console Firefox que par le validateur CSS W3C. Ça concerne un style de l'élément #page :

height: auto !important; /* for modern browsers */
height: auto n'est pas compris ni par Firefox, ni par le validateur.

Un peu de recherche sur le Net :

Mozilla Developer Center : auto n'est pas une propriété de height. Et toc !

Alsacréations : "énormes astuces" (un peu anciennes ?) pour combler les manques de IE (tiens donc ...). Et on y voit height: auto aussi bien que height: auto !important. On y voit également (voir les commentaires de l'article d'Alsacréations) l'astuce consistant à mettre un underscore (par ex. : _height) devant le nom d'un attribut. Cette astuce (underscore) a été utilisée plusieurs fois dans les CSS "externes" de iTheme. Bien évidemment, ces astuces et hacks ne sont pas du tout standard-compliant.

Nota à propos des hacks et astuces : il conviendrait, dans les codes Viabloga (aussi bien le HTML que les CSS ...) de documenter ces astuces par des commentaires. Afin de permettre une meilleure compréhension des codes. Et aussi afin d'éviter que lors d'une révision du code, on "supprime" ces hacks parce qu'incompatibles avec les standards ...

 

Fix | Le Mardi 25/03/2008 à 17:08 | [^] | Répondre

← Re: CSS dans le modèle - corrections

 D'autres pages précisant comment contourner le manque de support de min-height par IE :

http://www.wellstyled.com/css-minheight-hack.html 

et le "truc de l'underscore" : http://www.wellstyled.com/css-underscore-hack.html  

Ces pages sont plutôt anciennes ... 

 

Fix | Le Mardi 25/03/2008 à 18:50 | [^] | Répondre

← Re: CSS dans le modèle - corrections

 Underscore devant une propriété ? Le W3C admet - avec les plus grandes réserves - cette pratique vendor-specific.

Voir : http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

Pendant qu'on y est, on lira toute la page avec profit :-)
Et on pourra, aussi, constater que construire un navigateur, avec toutes ces indications "user-agent must", "must ignore" (etc.) c'est pas de la tarte .

 

Fix | Le Jeudi 27/03/2008 à 15:31 | [^] | Répondre

Fix,
Je n'ai pas tout lu mais le caractère '_' devant 'position' et 'top' est un hack. L'explication est donnée ici.
En gros, c'est pour que la position 'fixed' soi interprêté par IE6.
Je sais que ce n'est pas beau, mais nous n'avons pas trouvé d'autres solution:-(

De plus, n'oublies pas de tester le modèle sur tous les navigateurs ainsi que sur différentes versions avant de le "livrer" à Stéphane.
Je viendrai t'aider dès que j'ai un peu plus de temps:-)

En attendant, chauffe bien le terrain:-)

 

Mitra | Le Mardi 25/03/2008 à 22:47 | [^] | Répondre

Commenter Commenter
 

Archives par mois