Probleme de liens sur images

Bonsoir tous le monde !

J'aurais une petite question.

Deja je vous donne le liens du site en question :

http://www.lebergerac-bourges.fr

Sous Firefox : Les liens sur les cotés (les images) apparaissent parfaite bien avec leur cadre noir et l'effet rouge au survol

Pas contre le hic est sous IE qui lui ne reconnais pas les couleurs dans le fichier CSS et ignore totalement les couleurs pour les images et me garde les veille couleur d'origine qui sont le bleu et le violet tout pas beau!

y a t il un parade pour cela?
Modifié par ChRom (04 Oct 2007 - 00:20)

Bonjour et bienvenue à toi sur le Forum,

As-tu essayé d'augmenter le poids de ton instruction en précisant le conteneur, comme ceci ?

#menuleft a:link {...}

Par ailleurs, sache que les propriétés des liens sont héritées.
En conséquence de quoi, tu n'es pas obligé de reprendre toutes les instructions.

#menuleft a:link {
font-family:verdana, Arial, Sans-serif;
font-size:10px; [url=http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em]=> ici, on préférera un unité en em[/url]
color:#000000;
text-decoration:none;
}

#menuleft a:visited {
color:#000000;
}

#menuleft a:hover {
color:#FF0000;
}

#menuleft a:active {
color:#000000;
}

Enfin, pense à laisser un espace entre ton identitifant et la parenthèse.
Cela peut être source de problème.

Merci Cygnus pour ton aide!!

Je viens d'essayer de rajouter les lignes que tu viens de me données dans mon CSS et ce la ne changer rien du tous.

Et aujourd hui voulant voir comment se comporte le site sous opera je l'ai installer et a ma grande supprise, les liens sur les images sont encore different!

Voici mon css

body {
  background-color:#CC9933;
  font-family:verdana, Arial, Sans-serif;
  font-size:12px;
}
#global {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}
#menuleft {
  float: left;
  width:  200px;
}
#centrepage {
  margin-left: 220px;
  width:  570px;
  text-align: center;

}
#navigation  {
	width: 200px ;
	list-style: none ;
	margin: 250px ;
	padding: 250px ;
}
.c {
	text-align:center;
}	
a :link {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#000000;
text-decoration:none;
}
a :visited  {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#000000;
text-decoration:none;
}
a :hover {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#FF0000;
text-decoration:none;
}
a :active {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#000000;
text-decoration:none;
}

Et enfaite je voudrais avoir le meme rendu sous opera et ie qu'avec FireFox qui a le meuilleur rendu avec le contour noir sur les images et rouge au survol!!!

Peut etre aussi ce que je veux n'est pas possible !!!

Merci de votre aide

En visualisant ton code en entier, je me demande si ton problème ne pourrait pas être contourné autrement.

- Tout d'abord, transforme #menuleft en liste (<ul>...</ul>), ce qui soit dit en passant est la syntaxe la plus appropriée dans ce cas précis .
- Puis affecte une largeur fixe (égale à la largeur de tes images) à tes éléments de liste (<li>...</li>)
- N'oublie pas de renseigner (accueil, contact...) le champs alt="" de tes images pour le cas où celles-ci désactivées ou inaccessibles, ton menu deviendrait inutile.
- Donne à tes liens un comportement de type bloc, puis reprends la portion de code donnée précédemment.

Si tout se passe bien, cela devrait fonctionner...

merci cignus pour ton aide mais malheuresement ça ne marche pas.

Je crois vraiment que avec IE ça ne marche pas. Ca marche juste avec FF.

C'est pas grave on va faire avec et tanpis

Merci quand meme de ton aide.

je crois que les images en liens sous IE faut oublier

Ca ne fonctionne pas ?!?
J'avouerais être prise d'un gros doute là...
Tu ne voudrais pas nous montrer le code testé ?

ma feuille de style au moment des derniers test

body {
  background-color:#CC9933;
  font-family:verdana, Arial, Sans-serif;
  font-size:12px;
}
#global {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}
#menuleft {
	width: 200px ;
	list-style: none ;
	float: left;
	margin : 0;
	padding :0;
}
	
#centrepage {
  margin-left: 220px;
  width:  570px;
  text-align: center;

}
.c {
	text-align:center;
}
a {
	font-family:verdana, Arial, Sans-serif;
	font-size:10px;
	color:#000000;
	text-decoration:none;
}
ul#menuleft li a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 200px ;
	color:#000000;
}
ul#menuleft li a:link, ul#menuleft li a:visited, ul#menuleft li a:active  {
	color:#000000;
	background-color: #000000;
}	
ul#menuleft li a:hover
{
	color:#FF0000;
}

a :link {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#000000;
text-decoration:none;
}
a :visited   {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#000000;
text-decoration:none;
}
a :hover {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#FF0000;
text-decoration:none;
}
a :active {
font-family:verdana, Arial, Sans-serif;
font-size:10px;
color:#000000;
text-decoration:none;
}

Mode du menu

<ul id="menuleft">
    <li><a href="index.php"><img src="images/accueil.jpg" alt="Accueil" /></a></li>
    <li><a href="allerchezpapamaman.php"><img src="images/allerchezpapamaman.jpg" alt="Aller Chez Papa Maman" /></a></li>
    <li><a href="horaires.php"><img src="images/horaire.jpg" alt="Horaires" /></a></li>
    <li><a href="livredor.php"><img src="images/livredor.jpg" alt="Horaires" /></a></li>
</ul>

A savoir que le menu est dans un fichier php et que je l'appelle par un include

screen sous FF

http://img229.imageshack.us/img229/4945/001df3.jpg

screen sous IE7

http://img229.imageshack.us/img229/7074/002os1.jpg

screen sous Opera

http://img215.imageshack.us/img215/7660/003fm6.jpg

J ai teste la validation CSS elle est OK et egalement site valide XHTML STRICT

Tous est valide et malgres 3 navigateurs, 3 vue differentes, il ferait peut etre bien de valide les navigateur aussi car la c'est un casse tete

Edit : Y a aurait il pas un moyen pas exemple de supprimer les bordure images, mettre le lien dans un div avec une bordure normale et fait jouer la couleur de la bordure du div
Modifié par ChRom (04 Oct 2007 - 15:42)

Bon, bon, bon ...
Je crains que l'on ne se soit pas très bien compris : les instructions CSS données ne devaient pas être ajoutées, mais devaient remplacer celles déjà en place.

Voici le code testé, il fonctionne sur IE, FF et Opéra :

body {
background-color:#CC9933;
font-family:verdana, Arial, Sans-serif;
font-size:12px; [#red] vive les em[/#]
}

#global {
margin-left: auto;
margin-right: auto;
width: 800px;
}

#centrepage {
margin-left: 220px;
width: 570px;
text-align: center;
}

.c {
text-align:center;
}

ul#menuleft {
width: 200px ;
list-style: none ;
float: left;
margin : 0;
padding :0;
}

ul#menuleft li {
margin : 2px 0;
}

ul#menuleft li a:link {
font-size:10px; [#red] vive les em[/#]
color:#000000;
text-decoration:none;
display: block ;
}

ul#menuleft li a img {
border : none;
}

ul#menuleft li a:link, ul#menuleft li a:visited {
border : 1px solid #000000;
}	

ul#menuleft li a:hover {
border : 1px solid #FF0000;
}

Les différents décalages que tu as pu constater son simplement le fait des margin des éléments de <li> que tu n'avaient pas initialisé.
Ils sont définis dans la feuille de style propre au navigateur.
Il est donc normal que l'écrat ne soit pas le même partout.
Modifié par Cygnus (04 Oct 2007 - 17:37)

Salut,

Essaie :

#menuleft{
float:left;
width:200px;
}
#menuleft a:link img, #menuleft a:visited img,#menuleft a:active img{
font-family:verdana, Arial, Sans-serif;
font-size:10px;
border-color:#000;
text-decoration:none;
}
#menuleft a:hover img {
border-color:#f00;
text-decoration:none;
}

Ça devrait le faire