Asselin Benoit Développement - Création et conception de sites internet - Amiens Somme Picardie Paris France

Internet Explorer 8, la nouvelle croix du développeur web ( EmulateIE7 )
24`03`2009

3 commentairesPoster un commentaire !
Tags: Internet Explorer XHTML

Peut-être comme moi, vous venez de découvrir Internet Explorer 8 et que ce dernier est un " peu " plus compatible que Internet Explorer 7... Toutefois, certaines pages fonctionnent mal vu la quantité de patch CSS appliqués pour fixer les soucis de IE7, IE6, etc...

Microsoft a donc pensé à tout ! Il nous a sorti une balise META qui permet d'indiquer à Internet Explorer 8 la version du moteur graphique à utiliser. Pour forcer un rendu IE7 et non IE8, il suffit d'injecter la META ci-dessous :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Chose assez amusante, on pourrait croire que le site officiel de Microsoft est parfaitement compatible Internet Explorer 8, et qu'il n'a pas du tout besoin de cette META... et bien il n'en est rien, leur code source contient aussi la dite balise ! " Vive Microsoft ! "

Pendant ce temps, on doit toujours faire attention à Internet Explorer 6, utilisé par environ 1/4 des surfeurs du Web... Heureusement, ce chiffre baisse de mois en mois.

Documentation MSDN :
• http://msdn.microsoft.com/en-us/library/cc817574.aspx


border: 1px solid transparent Sous Internet Explorer 6 ( css , hack )
17`09`2008

5 commentairesPoster un commentaire !
Tags: Internet Explorer CSS

Astuce du jour : Comment faire comprendre à ce bon Internet Explorer 6.0 la couleur transparent appliquée sur un border ?

Une réponse peut déjà vous passer par la tête : " baaaahhhh un padding: 1px;, non ?! "...
oui mais voilà, Internet Explorer a une petite tendance à bugguer avec le CSS ( quelle découverte ! ) et pour fixer ces petits soucis, un border: 1px solid #fff; règle parfois le problème aussi étrange que celui puisse paraître, et donc la réponse a ma question prend tout son sens...

<style type="text/css" media="screen">

div.mon-test {
	width: 100%; height: 100px;
	border: 1px solid transparent;
}

</style>

<!-- Propriété propre à Internet Explorer 6.0 -->
<!--[if IE 6]>
<style type="text/css" media="screen">

div.mon-test {
	border-color: pink;
	filter: chroma(color=pink);
}

</style>
<![endif]-->

Cette solution n'est pas sans modifier le comportement du div impliqué, j'ai notamment remarqué que les propriétés de l'overflow n'étaient plus les mêmes. En bref, cette solution pourra ( je l'espère) vous aider, mais risque aussi de vous recréer d'autres problèmes ultérieurement. Je serais personnellement plus adepte d'un div dans un div.

Mais n'oubliez jamais cet adage : " Trop de div, Tue le div ! ".

Source du hack : http://acidmartin.wordpress.com/

 

nice try


Gérer les PNG transparents avec Internet Explorer 6 ( javascript, filter, CSS )
01`06`2008

Aucun commentairePoster un commentaire !
Tags: Internet Explorer Javascript CSS

Voici un petit javascript qui vous permettra de fixer la transparence des images au format PNG transparent 24 bits sous Microsoft Internet Explorer 6.

function fixPNG() {
	if(navigator.appName == 'Microsoft Internet Explorer') {
		var png = /\.png$/i;
		var imgs = document.getElementsByTagName('img');
		for(var i = 0, l = imgs.length; i < l; i++) {
			if(png.test(imgs.item(i).src)) {
				imgs.item(i).style.width = imgs.item(i).offsetWidth;
				imgs.item(i).style.height = imgs.item(i).offsetHeight;
				imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';
				imgs.item(i).src = 'empty.gif';
			}
		}
	}
}

Fonctionnement de la function :
Le PNG transparent est remplacé par un fichier GIF totalement transparent de 1px², puis le filter contenant le PNG est appliqué sur l'image GIF.
Pour activer cette fonction, il suffit de l'appeler dans un événement window.onload = function(){}.

Rappel des différentes écritures du filter en CSS :

img.image1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png', sizingMethod='image'); }
img.image2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png', sizingMethod='scale'); }
img.image3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png', sizingMethod='crop'); }


Astuce avec Math.max() et Math.min() en Javascript sous Internet Explorer
06`04`2008

Aucun commentairePoster un commentaire !
Tags: Javascript Internet Explorer

Math.max() et Math.min() attendent deux nombres comme paramètres. Math.max() retourne le plus grand des deux nombres, et Math.min() retourne le plus petits des deux nombres.

Depuis Microsoft Internet Explorer 5.5, vous pouvez ajouter plus de paramètres, et de manière générale les navigateurs dernières générations supportent cette écriture (Microsoft Internet Explorer, Mozilla Firefox, Safari, Opera Browser...)

<script type="text/javascript">

document.writeln(Math.max(5, 4, 3, -1, 9));	// retourne 9

document.writeln(Math.min(5, 4, 3, -1, 9));	// retourne -1

</script>

Rendre ''position: fixed'' compatible Internet Explorer 6 (CSS, expression)
11`02`2008

5 commentairesPoster un commentaire !
Tags: CSS Internet Explorer XHTML

Ce code a pour but de rendre compatible le fameux position : fixed sur Internet Explorer 6 à l'aide de la propriété expression() propre à ce dernier. Cette propriété permet de recalculer dynamiquement le contenu de l'expression expression(...) durant la manipulation de la page, en l'occurrence lors d'un évènement window.onscroll, sans code Javascript additionnel.


Page page-position.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>Rendre "position: fixed" compatible Microsoft Internet Explorer 6</title>
	
	
	<!-- Code CSS pour Firefox, Safari, Opera, Internet Explorer 7... -->
	
	<style type="text/css" media="screen">
		
	#fixed {
		position: fixed;
		left: 0; top: 0; right: 0;
		width: 100%;
		padding: 10px; background: gray;
	}
	
	</style>
	
	
	<!-- Code CSS pour Internet Explorer 6 -->
	
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	
	#fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	}
	
	</style>
	<![endif]-->
	
	
</head>

<body>
	
	<div id="fixed">DIV en position: fixed;</div>
	
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	
</body>

</html>

UPDATE : Il est important de copier l'intégralité du code avec les balises commentaires propres à Internet Explorer, sinon le fix ne fonctionnera pas !