oct 11

Centrer une div verticalement, y compris sous IE6

CSS 1 Comment »

La solution la plus simple serait d’ utiliser les propriétés suivantes sur le conteneur pour simuler le comportement d’un tableau:

display:table-cell;
vertical-align:middle;

Seulement cette solution ne fonctionne pas sous Internet Explorer 6…

Voici donc une autre solution qui fonctionne sous IE6:
CSS :

#conteneur{
	height:400px;
	position:relative;
}
#bloc{	
	position:absolute;
	top:50%;
	height:200px;
	margin-top:-100px;  /*  margin-top négatif de la moitié de la propriété height  */
}

HTML :

<div id="conteneur">
      <div id="bloc">
		Mon contenu HTML.
       </div>
</div>

Seul inconvénient, il faut connaître la hauteur du bloc intérieur.

campagne-stop-ie6

Post to Twitter Twitter ce post


sept 22

Google Chrome Frame amène l’ HTML 5 dans Internet Explorer 6,7,8…!

Actualité, Navigateurs 1 Comment »

Oui vous avez bien lu!

Google vient de proposer un plugin ( open source ) pour Internet Explorer 6, 7, 8 qui permet de charger une page web avec le moteur de rendu de Chrome, si la page contient dans son code la balise <meta> suivante:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Ceci devrait donc permettre aux irréductibles d’internet explorer 6 d’ accéder enfin à un Web plus rapide et conforme aux normes du W3C avec en prime les nouvelles balises de l’ HTML 5 (<canvas>,<header>…), mais aussi de soulager les développeurs web de nombreuses heures de souffrances pour rendre le web « compatible IE6″…donc faites tourner l’info…

Pour télécharger le plugin c’est ici !!!google-chrome-frame-internet-explorer

Voici une vidéo explicative :

News officielle ici.

Post to Twitter Twitter ce post

sept 16

Cibler et feinter Internet Explorer 6 dans son CSS

CSS No Comments »

Dans la série IE6 voici 3 différentes manières de cibler IE6 dans votre code CSS:

  1. Avec le !important :
    La clause !important est comprise par tous les navigateurs sauf IE6 et elle permet de donner la priorité à une instruction même si elle est redéfinie par la suite. Dans l’exemple ci-dessous l’ objet d’identifiant « test » sera vert dans tous les navigateur et rouge sous IE6.

    1
2
3
4

     #test{
     background-color:green !important;
     background-color:red;
 }
  2. En semant IE6 avec des sélecteurs trop compliqués pour lui:
    IE6 ne lira pas les sélecteurs trop compliqués comme « #test[id]« . Dans l’exemple ci-dessous l’ objet d’ identifiant « test » sera rouge dans tous les navigateur et vert sous IE6.

    1
2
3
4
5
6

     #test{
     background-color:green;
 }
 #test[id]{
     background-color:red;
 }
  3. Avec les commentaires conditionnels :
    Les commentaires conditionnels doivent être insérés dans votre code HTML et permettent ici de restreindre certaines instructions CSS à IE6.Dans l’exemple ci-dessous l’ objet d’ identifiant « test » sera rouge dans tous les navigateur et vert sous IE6.

    1
2
3
4
5
6
7
8
9
10
11
12

     <style>
     #test{
         background-color:red;
     }
</style>
<!--[if IE 6]>
 <style>
     #test{
         background-color:green;
     }
</style>
<![endif]-->

A vous maintenant d’ appliquer ces exemples à vos problèmes.

N’ oubliez pas que l’ordre des instructions CSS est bien sûr important et que le doctype l’est aussi, comme celui-ci par exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Et n’oubliez pas non plus..la lutte continue ;-)

campagne-stop-ie6

Post to Twitter Twitter ce post

sept 15

Tester son site sous IE5.5, IE6, IE7, IE8 sous XP, Vista et Seven

Navigateurs No Comments »

IETester permet de tester vos pages Web sous Internet Explorer 5.5, 6, 7, 8 et peut être installé sous Windows XP, Vista et Seven.

Et d’après mes tests, il a l’air très fiable :-) .

tester-ie6-seven-windows

Post to Twitter Twitter ce post

août 23

IE6 et Z-index la solution !

CSS 2 Comments »

Puisque nous allons nous « payer » IE6 jusqu’en 2014 (date de fin support de micro$oft..), j’ai décidé de faire une série de posts sur les bugs de IE6 en donnant la solution pour chacun d’eux. Celui-ci concerne z-index qui permet de gérer l’empilement (profondeur) des éléments HTML sur une page.

On rencontre ce bug la plupart du temps en créant un menu déroulant,quant le menu se déroule sous le contenu.

Pour le résoudre il suffit d’associer les styles CSS  : position:relative; et  : z-index:1; à la balise parente.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="barre">
   <ul id="menu">
	<li><a href="http://">Lien1</a></li>
	<li><a href="http://">Lien2</a></li>
   </ul>
</div>
#barre{
position: relative;
z-index:1;
}
 
#menu
{
z-index:12;
}

Post to Twitter Twitter ce post

juil 16

Youtube ne « supporte » plus IE6 !!

Actualité, Navigateurs No Comments »

Depuis hier, le site de vidéo Youtube détenu par Google, affiche le message suivant aux utilisateurs de IE6 (Internet explorer 6):

Utilisez un navigateur plus récent pour bénéficier d’autres fonctionnalités en ligne. L’assistance relative à Internet Explorer 6 ne sera bientôt plus disponible, effectuez la mise à niveau dès que possible.

Et propose 3 navigateurs de substitution ( Google Chrome , Firefox 3.5 et Internet Explorer 8 ) .

kill-ie6-die-meurt-creve

Ceci est une très bonne nouvelle ! Merci Youtube! Mais à quand le même le message sur facebook ? Et la fermeture de Google aux utilisateurs de IE6?

Pour ma part je vais surement arrêter de passer du temps à « développer pour IE6″ et en passer plus à réaliser de belles choses :-)

Pour ceux qui souhaitent participer à la lutte, voici un script très sympa à mettre sur votre site :  ie6update.com.

Post to Twitter Twitter ce post

fév 23

La norvège prend les devants dans la lutte anti-IE6,…à nous de poursuivre!

Actualité, Navigateurs No Comments »

Depuis plus d’une semaine, des sites norvégiens de grande audience comme finn.no, affichent clairement aux visiteurs de leurs sites qui utilisent le navigateur IE6 que la navigation sera bien plus confortable si ils changent de navigateur, et proposent des alternatives telles que Firefox, Opera,chrome…etc.

avertissement-anti-ie6-norvege
En effet ce navigateur sorti en 2001 par microsoft, ne respecte plus du tout les standards actuels du Web, et nous obligent(concepteurs de site web) à passer d’innombrables heures à corriger les bugs d’affichage de IE6…
Aujourd’hui le navigateur est encore utilisé par environ 20% des français, ce qui n’est pas encore assez négligeable pour laisser ces personnes se débrouiller avec leurs bugs d’affichage.

Aujourd’hui il est temps de forcer la main de ces 20% à changer de navigateur en agissant tous ensemble!
C’est pourquoi je vous propose une petite liste de site ou plugin qui vous permettront de mettre un avertissement aux visiteurs utilisant IE6 sur votre site ou blog .
Sites prônant la mort d’IE6:

campagne-stop-ie6

Plugin WordPress:

plugin-worpress-anti-ie6

Sachez que Microsoft lui-même soutient ce type d’action.

Post to Twitter Twitter ce post