28122 sujets

CSS et mise en forme, CSS3

Problème de sélection de texte sur IE6 avec un background .png

Bonjour,

J'ai un problème avec un background ( format png ) sur IE 6, il m'est impossible de sélectionner le texte. Sur IE7, firefox et safari c'est ok.

http://pascalandreallaire.com/test/pb_png_ie/probleme.html

Code html et css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
	
	body { background-color:#FFFFFF}
	
	/* Ie 6 ne reconnait pas ça */
	html>body #bg{ 
	
		width:781px;
		padding:30px;
		background: url(bg_content2.png) 0 0 repeat-y;
	}
	
	#contenu_A{ width:45%; float:left; }
	#contenu_B{ width:30%; float:left; }
	
	</style>
<!--[if lte IE 6]>
	<style>
	#bg{ 
		padding:30px;
		width:781px;
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale,src='bg_content2.png' );
		}
	</style>
	
	<![endif]-->
</head>
<body>
<div id="bg">
  <div id="contenu_A">
    <h2>Lorem ipsum dolor sit amet</h2>
    <small class="date">Octobre 24/10/2007</small><br/>
    <small><span class="by">Johanne </span><span class="posted">dit:</span></small>
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
  </div>
  <div id="contenu_B">
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
  </div>
  <div style="clear:both; "></div>
</div>
</body>
</html>


Le problème semble venir lorsque j'ajoute un width ou un float sur les div de contenu ( soit contenuA ou contenuB )

L'objectif : Serait de pouvoir floater 2 div avec un background ( format png ) sur IE 6 sans perdre la sélection du contenu.
Modifié par Pascal-AA (07 Nov 2007 - 23:09)
Hello,

C'est un des effets secondaires possibles de la méthode pour utiliser la transparence PNG avec IE6, effectivement.

Le quick 'n dirty fix généralement utilisé consiste à appliquer un position: relative aux éléments que l'on veut rendre sélectionnables à nouveau.

Donc dans les styles pour IE6 et inférieurs:
#contenu_A, #contenu_B {
	position: relative;
}
Sujet clos
Aller à