28173 sujets

CSS et mise en forme, CSS3

Hello,

j'ai un petit problème uniquement sur ie6:
J'ai un div qui contenient un background PNG 24 que j'applique via le filtre pour ie6..
pour que les liens contenu dans ce div soientt clickables je leurs applique une position relative jusque la tout ce passe bien...

le probleme c'est que ces liens contiennent un background et que ce background ne s'affiche pas tres bien sur IE6

voici le bug en image :

en IE6
http://img484.imageshack.us/img484/1017/ie6di1.th.gif

dans les autres navigateurs :
http://img455.imageshack.us/img455/1120/ffey2.th.gif

voici le code HTML




<div id="customerZone">
							<div id="headerCustomerZone"><img src="design/images/content/en/titleCustomerZone.gif" alt="" /></div>
							<div id="contentCustomerZone">
								<div id="myEservices">
									<h1><a href="#">my e-services</a></h1>
									<div id="message">
										<span>1 new message:</span>
										<a href="#" class="promo">"Promo: 10% for your next subscription..."</a>									
									</div>
									<div id="login">
										<p><label>Login</label><input type="text" name="0" value="" /></p>
										<p><label>Password</label><input type="text" name="0" value="" /> <a href="#"><img src="design/images/content/goBtnCZ.gif" alt="" /></a></p>
										<div>
											<a href="#" class="loginLink">register</a><br />
											<a href="#" class="loginLink">forgotten login/password</a>										
										</div>
									</div>
								</div>
								<div id="onlineServices">
									<h1><a href="#">online services</a></h1>
									<p>
										<a href="#" class="linkList">see my last bill</a><br />
										<a href="#" class="linkList">manage my internet account</a><br />
										<a href="#" class="linkList">my Belgacom</a><br />
									</p>
									<div class="allLink"><a href="#">>> all e-services</a></div>
								</div>
								<div id="onlineSupport">
									<h1><a href="#">online support</a></h1>
									<p>
										<a href="#" class="linkList">see my last bill</a><br />
										<a href="#" class="linkList">manage my internet account</a><br />
										<a href="#" class="linkList">my Belgacom</a><br />
									</p>
									<div class="allLink"><a href="#">>> go to online support</a></div>
								</div>
							</div>
							<div id="footerCustomerZone"></div>
						</div>


et voici la css



						#customerZone a,#customerZone input{ position:relative}
						#headerCustomerZone{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='design/images/content/bgHeaderCZ.png', sizingMethod='scale'); height:17px; padding:9px 0 0 16px;}
						div[id="headerCustomerZone"]{background:url(../images/content/bgHeaderCZ.png) repeat-x;}
						#contentCustomerZone{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='design/images/content/bgContentCZ1.png', sizingMethod='scale'); border:solid #dbdbdb; border-width:0 1px; padding:14px 0 0 17px; min-height:406px}
						html*#contentCustomerZone{ height:400px; _height:402px; *min-height:402px;}
							#contentCustomerZone a.linkList,
							#contentCustomerZone a.linkList:link,
							#contentCustomerZone a.linkList:active,
							#contentCustomerZone a.linkList:visited{ background:url(../images/content/arrowLinkContent.gif) no-repeat left; padding-left:8px; text-decoration:none; color:#577e91}
							#contentCustomerZone a.linkList:hover{ text-decoration:underline}


et je suis en XHTML strcit

merci d'avance...
Modifié par gunthbar (26 Oct 2007 - 14:05)
Bonjour,

Est-ce que ce ne serait pas le sizingMethod='scale' qui poserait problème ici? Est-ce qu'il ne faudrait pas utiliser sizingMethod='crop' à la place?

Un peu de lecture:
http://forum.alsacreations.com/faq/faq-96-Obtenir-la-transparence-PNG-avec-Internet-Explorer-6.html

Remarques en passant:
- Est-ce qu'on a besoin de PNG-24 ici? Du GIF ou du PNG-8 pourraient suffire, non?
- Est-ce qu'il ne serait pas préférable d'utiliser les commentaires conditionnels pour viser Internet Explorer 6 et inférieurs, plutôt que de jouer sur la syntaxe des sélecteurs CSS?