28173 sujets

CSS et mise en forme, CSS3

LI : background image incliquable sous IE

Hello hello ...
2 petites images valant mieux qu'un grand discours voici le problème que je rencontre et qui me casse la tête

Image 1 : Sous Firefox l'image de fond est cliquable

http://i1.tinypic.com/ru31o5.png


Image 2 : Sous IE l'image de fond n'est pas cliquable :

http://i1.tinypic.com/ru31xd.png
(ce ne sont pas les même images)

Et pourtant ça devrait marcher si je regarde le code de la CSS :
#toolbar ul{ margin: 0; padding: 0px; list-style: none; }
#toolbar li{ float: left; margin: 0 0 0 1px; padding: 0; display: inline; text-align: center; vertical-align: middle; }
#toolbar a{ margin-left: 1px; margin-right: 1px; padding: 39px 5px 3px 5px; display: block; color: #000000; text-decoration: none; }
#toolbar a:active{ border-left: 1px solid #b6b6b6; border-right: 1px solid #b6b6b6; margin-left: 0px; margin-right: 0px; background: url(toolbara_bg.gif) #f4f4f4; color: #000000; }
#toolbar #tcurrent a{ border-left: 1px solid #b6b6b6; border-right: 1px solid #b6b6b6; margin-left: 0px; margin-right: 0px; background: url(toolbara_bg.gif) #f4f4f4; color: #000000; }
#toolbar #tblogo a { padding: 0px; margin: 0px; width: 170px; border: 0px; display: block; background: url(site_logo.gif) no-repeat; height: 55px; }
#toolbar #tblogo:active { border: 0px; margin: 0 0 0 1px; }
#toolbar #tbprojects:active { background: url(toolbara_bg.gif) #f4f4f4; }
#toolbar #tbprojects a { display: block; background: url(projects.gif) no-repeat top center; }
#toolbar #tbprojects a:active { display: block; background: url(tb_forum_a.gif) no-repeat top center; }
#toolbar #tbsite:active { background: url(toolbara_bg.gif) #f4f4f4; }
#toolbar #tbsite a { display: block; background: url(sites.gif) no-repeat top center; }
#toolbar #tbsite a:active { display: block; background: url(sites.gif) no-repeat top center; }


Que faut-il que je fasse pour régler ce problème ?

Merci d'avance pour vos réponses.[
Modifié par Haddock (20 Mar 2006 - 10:35)
Peux-tu fournir ton code html qui va avec ?

Mais il me semble qu'il y a déjà un problème de conception.
Le texte sous les images (comme "accueil") sont dans l'image ? Si oui, ça ne va pas, c'est pas bon. Il faut que les images soient des illustrations du texte seulement. Donc, si tu gardes qu'une image, il y a plus de textes donc c'est pas accessibles. Il faut toujours avoir en tête "et si mes images n'apparaissent pas, peut-on malgré tout naviguer ?
Là, il faudrait que tu aies donc :

Accueil | Campages | Calendrier | Recherche

Et que tu les manipules sous CSS pour coller tes icones avec un background-img

A+
Modifié par statvg (20 Mar 2006 - 10:46)
Il y a peut-être un soucis au niveau des styles appliqués aux <li>. Pourquoi appliquer la propriété 
display: inline;
à ces éléments ? Ils devraient déjà se placer les uns à côté des autres à cause du 
float: left;
, je ne vois pas l'intérêt. D'autant que ce n'est pas très cohérent, à partir du moment ou tu forces l'affichage des liens dans les <li> en block.

D'autre part, la propriété 
vertical-align: middle;
ne concerne que les cellules de tableau, elle n'a pas d'effet dans ce cas.

stagv > Il est tout à fait possible d'utiliser des images pour le menu en restant accessible, mais il faut alors placer des images "en dur" dans le code html, afin de pouvoir utiliser l'attribut "alt" pour afficher un texte de remplacement adéquat si les images ne sont pas affichées (ou affichables). Si le texte du lien est placé sur l'image de fond, effectivement, ça pose problème.
"Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres."
Excellent !

Merci pour vos réponses Smiley cligne

Non les textes ne sont pas dans les images.
Voici le code pour générer l'html :
echo "<table class='tableborder' border='0' cellpadding='3' cellspacing='0' width='100%'>
	<tbody><tr>
		<td class='toolbar' colspan='2'>
		<ul id='toolbar'>
			<li id='tblogo'><a href='#'></a></li>
			<li><img src='../themes/TMII/navsep2.gif' alt='sep'></li>
			<li id='tbprojects'><a href='#'>Vos projets</a></li>
			<li id='tbsite'><a href='#'>Site des projets</a></li>
			<li id='tbcal'><a href='#'>Votre agenda</a></li>
			<li id='tbprefs'><a href='#'>Vos préférences</a></li>
			<li><img src='../themes/TMII/navsep2.gif' alt='sep'></li>
			<li style='float: right;' width='98' height='31' id='tbtm'><a href='#'></a></li>
		</ul>
		</td>
	</tr>
	</table>";

Je vois toujours pas où se situe le problème Smiley confus
Deja une image de fond n'est pas cliquable sauf si on passe de l'autre coté de l'ecran.
En suite les dimensions se programment en em, px, cm, %, mm etc...
pas 68 et 21 quoi?
68 et 21 ?
98 et 31 non ?
mais cette ligne n'est pas concernée par le problème !

"Deja une image de fond n'est pas cliquable sauf si on passe de l'autre coté de l'ecran."
je vais dire à Firefox que ce qu'il arrive à faire est impossible alors
ce n'est pas sur l'image que tu cliques mais sur le lien texte .
donne des valeurs en px a li ca changera pas mal
Sujet clos
Aller à