function first_p($content){
return preg_replace( '/<p([^>]+)?>/', '<p$1 class="first">', $content, 1 );
}

add_filter( 'the_content', 'first_p' );

Avec par exemple :

.post .entry p.first {border:1px dashed #333;margin-bottom:10px;}

Sauf qu’en plus de signaler que c’est du WordPress, celui-ci va jusqu’à indiquer la version utilisée.

Cette ligne, ajouter au sein de la balise head, là voici :

<meta name="generator" content="WordPress 2.9" />

Elle n’est pas gênante, sauf que chaque version a ses failles…

Vous voyez donc ou je veux en venir ?

Il vaut mieux être prévoyant et ne pas donner le bâton pour se faire battre comme on dit

// Remove the WordPress Generator
function remove_generators() { return ''; }
add_filter( 'the_generator', 'remove_generators' );

Vous pouvez également indiquer qu’il s’agit de WordPress sans préciser quelle version

// Change the WordPress Generator
function change_generators() { return '<meta name="generator" content="WordPress" />'; }
add_filter( 'the_generator', 'change_generators' );

A placer dans le fichier functions.php.

Je vous ai parlé d’un plugin jQuery qui permettait aux utilisateurs qui utilise (encore) cette version 6 d’Internet Explorer de télécharger la dernière version de ce navigateur.

Aujourd’hui c’est d’un correcteur en ligne : IE6 CSS Fixer.

Son utilisation :

Vous lui soumettez votre code CSS et hop, il vous renvoi ce même code mais implémenter de quelques correctifs adapter à IE6.

3 moyens pour soumettre votre fichier :

• l’URL de votre feuille de style,
• upload de celui-ci,
• ou encore un copier-coller du code.

Lien :

• IE6 CSS Fixer: starter kit

#element {position:fixed;top:0;left:0}

Et là encore, problème avec Internet Explorer puisque position:fixed… connais pas !

La solution consiste à utiliser un position:absolute et à calculer notre propriété top.

Calculer ? Comment cà calculer ?

Et oui car une chose que comprend Internet Explorer c’est la ligne suivante :

#element {position:absolute;left:0;top:expression(documentElement.scrollTop + body.scrollTop)}

expression() peut en effet contenir du jscript et donc ici permettre un recalcule automatique à chaque détection de scrool.

Et voila ! Notre bloc #element est maintenant fixé sur notre page web.

Pour éviter un désagrément visuel (un effet saccadé lors du scrool), la ligne suivante est cependant nécessaire :

background:url(null) fixed;

A vous maintenant de mettre ce code spécifique dans une feuille réservée à IE

Pour contourner ce problème l’une des solutions est de passé par un fichier contenant pour faire simple une sorte de code javascript et qui portant l’extension .htc (pour HTML Components).

Vous trouverez par la suite le lien pour télécharger ce fichier mais commençons par la mise en place de cette solution.

L’appel à ce fichier se fait via la propriété CSS behaviour comme ceci :

#element {behavior:url(mon_fichier_htc.htc)}

Voici comment je procède en ce qui concerne les images PNG (car ces fichiers htc peuvent servir à d’autres choses…).

Dans la partie head, je rajoute une feuille de style rien que pour Internet Explorer

<!--[if IE]><link href="styles/ie.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->

Sur tous mes éléments étant ou contenant une image PNG, je rajoute la class png

<!-- une image png -->
<img src="images/mon_image.png" alt="Mon image PNG" />

<!-- un bloc ayant une image png en background -->
<div class="png"></png>

Et dans la feuille de style ie.css, je précise le chemin vers mon fichier htc :

.png {behavior:url(scripts/iepngfix.htc)}

Remarques :

• le chemin vers le fichier htc se fait non pas depuis votre fichier CSS mais depuis la page appelante,
• une image blank.gif est nécessaire (celle-ci est fourni dans avec le fichier iepngfix.htc). Le chemin vers celle-ci est à préciser dans le fichier iepngfix.htc

Il vous reste à télécharger le fichier htc

Lien :

• iepngfix chez twinhelix.com

overflow:auto tu connais ?

Et je vous réponds du tac au tac :

IE6 rajoute également une scrollbar horizontale, même si il n’y en as pas besoin…

La solution est pourtant bien avec cette propriété overflow.

Voici donc la version compatible avec IE6 :

#bloc {
    height:200px;
    overflow:hidden;
    overflow-y:auto;
    position:relative;
}

C’est bien la succession de 3 propriétés (avec overflow et overflow-y n’oubliez pas position:relative) qui  donne le résultat escompté.