28172 sujets

CSS et mise en forme, CSS3

Commentaires conditionnels = mes liens plus cliquables sur IE [résolu]

Bonjour a tous.

Voilà mon amusant nouveau ptit bug IE.
Avec les commentaires conditionnels pour appeller une page css special Ie mes liens hypertext ne sont plus cliquables sur IE.

j'utilise des commentaire conditionnels dans ma page car j'utilise des png transparent non gérés sur IE:
ça me sert à faire le fond de mon site (un cadre blanc avec des ombres transparentes tout autour). Les ombres se supperposent au fond de mon body qui est lui est rayé.
Vous pouvez avoir une idée ici : http://www.francois-rosenbaum.com/probleme_conditionnel/contact_listecontactsbug.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="manufactures_du_chateau.css" rel="stylesheet" type="text/css">	
<link href="page_listecontacts.css" rel="stylesheet" type="text/css">
<!--[if IE]><link rel="STYLESHEET" href="manufactures_du_chateau_ie.css" type="text/css" /><![endif]-->	

</head>

<body marginheight="0" topmargin="0">


<div class="conteneur_principal">   
   <table class="tableau_contact" align="center" width="672" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td><a href="formulaire_eric_rosenbaum.html">Contacter Eric Rosenbaum</a></td>
      <td><a href="formulaire_eric_rosenbaum.html">Contacter Eric Rosenbaum</a></td>
  </tr> 
</table> 
</div>
<!--fin conteneur_principal -->

</body>
</html>



dès que j'enleve ça :
<!--[if IE]><link rel="STYLESHEET" href="manufactures_du_chateau_ie.css" type="text/css" /><![endif]-->

Mes liens sont alors de nouveau cliquables sur ie.

Ya quelquechose à faire vous croyez?
Modifié par boucdur (02 Feb 2008 - 19:21)
Bon j'ai finis par trouver quelqu'un sur le forum avec le meme probleme que moi.
J'ai trouvé la solution avec :

Donc quand on met le conteneur du site en position:static; et le ce qu'il y a dedans en position:relative;

Les liens sont de nouveau cliquables.

Voilà probleme resolu
Heu... ça veut rien dire ce titre. Ton problème n'a strictement rien à voir avec les commentaires conditionnels. Tu as tout simplement un problème avec le code CSS utilisé dans ta feuille de correctifs CSS qui, effectivement, est appelée via un commentaire conditionnel. Mais elle pourrait être appelée sans commentaires conditionnels, ou bien la ou les propriétés fautives pourraient être directement dans ta feuille de styles principale, le problème serait exactement le même.

Voilà pour le point de méthode. Smiley cligne

Autre point de méthode (soyons fous): ton commentaire conditionnel n'est pas pertinent. Tu utilises ta feuille de correctifs CSS essentiellement pour ce problème de tansparence PNG. Or, ton commentaire conditionnel vise toutes les versions d'Internet Explorer, y compris la version 7 qui gère la transparence PNG, ainsi que la 8, la 9, la 10 qui toutes la gèreront, bien entendu.
Bref, ces correctifs s'adressent essentiellement à IE 6.0 et 5.5 (le 5.0 ne comprend pas les filtres DirectX que tu utilises pour obtenir la transparence PNG). On utilisera donc plutôt: 
<!--[if lte IE 6]>
(vise IE 6.0 et versions inférieures).
Si besoin, tu devras peut-être faire une feuille de correctifs pour IE 6 et inférieurs, et une autre pour juste IE7 ou pour IE7 et inférieurs.

Pour en venir au problème... eh bien je vois que le temps que j'écrive tu as trouvé la solution. Smiley smile
Par contre c'est peut-être un peu extrême de positionner tous les liens en relatif. On peut éviter ça en positionnant en relatif un élément intercalé entre le conteneur avec propriété filter et les liens.

Par exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css" media="screen">
	body {
		margin: 0;
		padding: 20px 50px;
		background: white url(http://www.francois-rosenbaum.com/probleme_conditionnel/fond_stripes.png);
	}
	div#test {
		width: 800px;
		margin: 50px auto;
		background: url(http://www.francois-rosenbaum.com/probleme_conditionnel/bande_fond_blanc.png) repeat-y left top;
	}
	div#test-bis {
		margin: 0 20px;
		padding: 1px 0;
		background: white;
	}
	a {color: green;}
	a:hover, a:focus, a:active {color: red;}
	</style>

	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	/* Transparence PNG pour IE5.5-6: on supprime l'image de fond
	   et on dessine un fond avec transparence via DirectX */
	div#test {
		background: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.francois-rosenbaum.com/probleme_conditionnel/bande_fond_blanc.png", sizingMethod="scale");
	}
	/* Correctif pour les liens non cliquables
	   (effet secondaire du filtre DirectX utilisé ci-dessus) */
	div#test-bis {position: relative;}
	</style>
	<![endif]-->
</head>

<body>

<div id="test">
	<div id="test-bis">
		<p>Lorem ipsum <a href="http://example.com">dolor sit amet</a>, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, <a href="http://example.com">adipiscing nec</a>, ultricies sed, dolor.</p>
	</div><!-- #test-bis -->
</div><!-- #test -->

<p>Ut velit mauris, egestas sed, <a href="http://example.com">gravida nec</a>, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin.</p>

</body>
</html>

Par contre, ça ne marche que si le conteneur avec propriété filter n'est pas lui-même positionné (donc si il est en position: static, implicitement ou explicitement).
Merci pour ce plus d'info,
c'est quand meme dingue cette multitude de problemes à regler en cascade.

J'espere que ie8 reglera pas tous les bugs.
J'en ai tellement chier pour connaitre la solutions aux 3000 bugs (incroyables) qui surviennent sans arrêt sur la moindre petite page toute simple.

Faudrait pas que les petits arrivent sur le marché tout sourire genre trop facile de monter des sites web.

Non mais oh hé !!
boucdur a écrit :
Faudrait pas que les petits arrivent sur le marché tout sourire genre trop facile de monter des sites web.

Ben oui, après le jeune voisin de la cousine du patron pourrait réaliser le site web de l'entreprise (une PME en général), au black et sans vision à moyen ou long terme, sans maitrise technique, sans réflexion cadrée sur la communication en ligne (et je ne parle même pas du retour sur investissement)... Oh pardon, c'est déjà comme ça que ça marche? Autant pour moi. Smiley ravi

Plus sérieusement:
- oui, c'est plus compliqué que si c'était plus simple;
- l'intégration HTML/CSS est une compétence à part entière, et il y a des gens dont c'est l'activité principale;
- les processus en cours font que l'on se dirige vers moins de montage à la main et vers plus de produits industrialisés et packagés;
- ces produits seront adaptables à des besoins spécifiques de plusieurs manières, mais tout travail d'adaptation passé le changement du logo (et encore!) sera un service pour lequel il faudra payer un technicien.

À côté de ça, on sera toujours libre de monter de gros projets sur-mesure avec les budgets sur-mesure qui vont avec, on de bricoler par soi-même. Et pour la bricole, techniquement ça s'arrangera progressivement avec le meilleur support des standards, le retrait progressif d'IE6 puis d'IE7, mais dans l'ensemble le ressenti sera le même car les bricoleurs de demain voudront faire des choses plus avancées que celles que veulent faire les bricoleurs d'aujourd'hui. Smiley cligne
Sujet clos
Aller à