CSS, XHTML, Standards du web, Tutoriaux, Techniques Web, Astuces. Eniris : Post-it™ on line

un grand merci a Shemu pour sa trouvaille sur KomodoMedia!

En effet c'est le script le plus efficace qu'il m'a été donné de "trouver" pour résoudre le fichu problème de canal alpha des PNG sous IE6.

Le code a mettre dans votre css :

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Placez un gif transparent à coté de votre CSS nommé "transparent.gif" (si vous voulez le mettre dans le dossier "images" ou autre n'oubliez pas de changer le chemin dans le code si dessus)

il ne vous reste plus qu'a affecter la class "png" aux images .png de vos pages, idem pour les blocs et autres avec un .png en background CSS.

Pour des exemples, je vous invite à visiter le site de KomodoMedia.

Sinon il y a toujours la solution de changer le gris par defaut qu'affiche IE6, via le logiciel TweakPNG (un tuto est dispo ici phoenity.com), pas top si vous n'avez pas un fond uni!

Lors d'un remplacement de texte par l'image (avec le CSS) et l'utilisation de text-indent:-999em; sur un lien, FireFox nous affiche un immonde cadre pointillé qui part du lien, et qui va jusqu'au bord gauche de la fenêtre (navigateur). Exemple :

Il s'agit d'une "propriété" de FF, qui matérialise la zone cliquée d'un lien.

Il est cependant possible de masquer ces bordures :

/* hack FF pour masquer les contours pointillé sur les liens
-------------------------------------------------------*/
a{outline: none;}
:focus{-moz-outline-style: none;}

Pour aller plus loin, la source : http://sonspring.com/journal/removing-dotted-links

Pour réinitialiser les propriétés des tags html par defaut des différents navigateurs :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ via Digg

Au hasard de mon surf, ce matin je suis arrivé sur le site Color in Motion

Ce site mets en scène les couleurs primaires afin de présenter leurs significations

c'est en flash et c'est très bien fait

Apres la découverte et la visite des sites suivants :

http://www.gogtalk.com/
http://www.customizetalk.com/

j'ai pu voir comment sont fait les themes visuels de discussion de talk™, et vu que c'est de l'html avec du CSS, trop facile!

Voici donc le theme que j'ai fait avec quelques avatars personnalisés : chat talk eniris theme
Pour l'installation suivez le txt

Lire la suite