Aller au contenu

Transparence progressive sur PNG IE et Chrome

WolwX

Par WolwX
dans (X)HTML et CSS

 Partager

Sujets conseillés

WolwX

WolwX

Posté
Posté

Bonjour messieurs :)

Je me permet de venir à vous et donc de créer un topic car dans mes recherches google concernant ma requête je suis revenu quelques fois par ici.

J'explique mon soucis en espérant pouvoir profiter de vos conseils avisés donc.

Actuellement sur la production d'un site web utilisant une bonne partie d'effet en ajax, et je suis chagriné par le rendu sous Internet Explorer 8 :/

En effet je souhaite appliquer des effets de fade in out d'images en javascript, le rendu est nickel sous Google Chrome mais catastrophique sous Internet Explorer 8 à cause de la transparence progressive et la gestion des plans par ce dernier.

J'ai donc des jeux d'images sur le logo dans le header, sur l'animation centrale, et sur les lumières apparaissant sur les bordures, et sur ces dernières on voit de manière flagrante que la transparence pose problème.

Voici la page web en question http://dyelo.wolwx.net ainsi que le code CSS de concerné pour les lumières apparaissant disparaissant :

	#light-little	{
	background-image: url(images/light-maquilleuse.png); 
	width:38px;
	height:71px;
	}

	.coins1	{
			position:absolute;
			z-index:2;

	width:38px;
	height:71px;
    left: 50%;
    margin-left: -353px;
	margin-top:-23px;
	}

J'espère ne pas vous déranger avec cette requête et avoir votre avis d'expert ;)

Dudu

Dudu

Posté
Posté

Salut, et bienvenue sur le Hub :)

Je n'utilise pas Windows, donc je ne dispose pas d'Internet Explorer pour faire des tests sur ton site.

En revanche, une chose est sûre : Internet Explorer passe en mode dégradé si le DOCTYPE n'est pas sur la première ligne dans le code source. Essaie d'enlever les 4 lignes de commentaires situées avant (d'autant qu'elles ne servent à rien) et vois si ça change quelque chose ;)

NB : Rien du tout avant la ligne du DOCTYPE, même pas le moindre espace ! Le premier caractère de ton code source doit être le chevron ouvrant de ton DOCTYPE : <

WolwX

WolwX

Posté
  • Auteur
Posté

Bien merci pour la bienvenue et la réponse :D

En fait voici le code de mon header.php

<!-- Prise en compte des réglages de thème DEBUT -->
<?php 
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>
<!-- Prise en compte des réglages de thème FIN -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

Il faudrait que je mette mon commentaire et la partie php après le Doctype ?

Dadou

Dadou

Posté
Posté

Non, il faut juste que le premier caractère affiché dans le source généré soit celui du doctype

<?php 

// Prise en compte des réglages de thème DEBUT

global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $value['id'] = $value['std']; } else { $value['id'] = get_settings( $value['id'] ); } }

// Prise en compte des réglages de thème

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

Comme cela ce serait bon (avec les commentaires dans le PHP)

WolwX

WolwX

Posté
  • Auteur
Posté (modifié)

Ahhhh parfait ! Je comprend :D

Merci :)

Je corrige ça desuite.

J'ai aussi fait une validation W3C de mon CSS, mais il me manque à valider W3C mon html.

Concernant les png c'est toujours problématique, la transparence est mal gérée, enfin le rendu n'est pas le même sous IE :s

Modifié par Ernestine
Pas la peine de recopier le message précédent dans son intégralité, on vient de le lire.
paolodelmare

paolodelmare

Posté
Posté

IE et la transparence, c'est une grande histoire d'amour.

Tu peux t'inspirer de cet article et celui-ci.

Par ailleurs, tu à 14 (!) scripts js et 5 feuilles css appelées par ta page, ce qui peut impacter les performances réelles et ressenties. Les appels js (exception faite des asynchrones) devraient être en bas de page, juste avant le tag de fin de body.

WolwX

WolwX

Posté
  • Auteur
Posté (modifié)

IE et la transparence, c'est une grande histoire d'amour.

Tu peux t'inspirer de cet article et celui-ci.

Par ailleurs, tu à 14 (!) scripts js et 5 feuilles css appelées par ta page, ce qui peut impacter les performances réelles et ressenties. Les appels js (exception faite des asynchrones) devraient être en bas de page, juste avant le tag de fin de body.

Merci bien :D

Ce lien est parfait http://rbarret.info/2010/11/02/hack-alpha-transparency-ie7-ie8-et-fadein-fadeout/

Bien que je ne soit pas arrivé à faire ce que je voulais :s

A noter que lorsque j'ai cette erreur ligne 155 du fichier [media]http://dyelo.wolwx.net/wp-content/themes/dyelo.com/iepngfix.htc :

IEPNGFix.childFix = function(elm) {
	// "hasLayout" fix for unclickable children inside PNG backgrounds.
	var tags = [

Et que donc la boite d'alerte apparait, j'ai de la transparence sur mes png :/

Je pense que je vais donc voir pour désactiver certains effet sous Internet Explorer :(

PS : désolé pour le précédent message, je n'ai pas vue que je réécrivais en double lors de la validation

Modifié par WolwX

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...