Image arrière plan qui apparaît sous tous les liens

Bonjour à toutes et à tous

Je dois certainnement commettre une erreur quelque part mais je n'arrive pas à trouver laquelle.

Je dispose d'une barre horizontale de navigation qui fonctionne bien mais qui me crée des effets des bords sur d'autres zones
C'est la partie "ul,li.menu-current" qui pose problème : l'image de fond (nav_active.gif) appelée apparaît aussi dans des liens, comme, ci-après, dans la "box".

Pourquoi tout cela se mélange ?

Merci d'avance pour votre aide.

La CSS de la barre de navigation :

#navbar {
		clear: both;
		float: left;
		width: 100%;
		height: 31px;
		background: transparent url('css/images/nav_bg.gif') repeat-x 0 0;
		}

ul.menu {
		float: left;
		margin: 0;
		padding: 0 15px;
		list-style-type: none;
		}
ul.menu li {
		float: left;
		}
ul.menu li a {
	float: left;
	display: block;
	height: 28px;
	padding: 3px 15px 0 15px;
	line-height: 24px;
	color: #fff;
	text-decoration: none;
		}
ul.menu li a:link,
ul.menu li a:visited {
		color: #fff;
		background: transparent url('css/images/nav_hover.gif') no-repeat center top;
		}
ul.menu li a:hover,
ul.menu li a:active {
		color: #fff;
		background: transparent url('css/images/nav_hover.gif') no-repeat center -31px;
		text-decoration: none;
		}

ul,li.menu-current a:link,
ul,li.menu-current a:visited,
ul,li.menu-current a:hover,
ul,li.menu-current a:active {
		color: #fff;
		background: transparent url('css/images/nav_active.gif') no-repeat center bottom;
		text-decoration: none;
}

Son code HTML :

<div id="navbar">
		<ul class="menu" id="menu">
			<li><a href="" title="Home">Home</a></li>
			<li><a class="current" href="" title="Archive">Archive</a></li>
			<li><a href="" title="Crédits">Crédits</a></li>
			<li><a href="" title="Contact">Contact</a></li>
			<li><a href="/" title="Site Map">Site Map</a></li>
			</ul>
			</div>

La CSS de la box :

#box
{
	position: relative;
	background: url('css/images/boxbg.jpg') no-repeat;
	left: -1.5em;
	padding: 1.2em;
	border-bottom: 1px solid #5CA137;
	margin-bottom: 2em;
	text-align: justify;
}
#box ul
{
	list-style: none;
}

#box li
{
line-height: 2.0em;
}

Son code HTML :

<div id="box">
				<h3>Derniers articles</h3>
				<ul>
					<li><a href="" title="1">Stop the cavalry</a></li>
					<li><a href="" title="2">Cinnamon Girl</a></li>
				</ul>
	</div>

Modifié par Sventovit (01 Apr 2007 - 15:39)

Salut.

La règle

ul,li.menu-current a

s'applique à
1. Tous les ul
2. Tous les a présents dans un li.menu-current

Tu dois certainement t'adresser à

ul li.menu-current a

Modifié par <nicolas> (01 Apr 2007 - 16:11)

Hello <nicolas>
déjà je m'apperçois que j'avais tapé une virgule au lieu du point.
Je vais essayer avec

ul.li menu-current a

Modifié par Sventovit (01 Apr 2007 - 16:45)

Sventovit a écrit :
déjà je m'apperçois que j'avais tapé une virgule au lieu du point.
Je vais essayer avec

ul.li menu-current a

(Non mais dites-moi qu'il le fait exprès, ou bien il concourt pour le titre de boulet du jour. )

ul.li, ça veut dire que l'on vise les éléments ul ayant pour classe "li". Tu es sûr que c'est ce que tu veux faire ?

Le message de <nicolas> me semblait pourtant assez clair.

PS : aucun mépris ou condescendance dans ce message. C'est juste une petite pique pas bien méchante.
Modifié par Florent V. (01 Apr 2007 - 20:15)

Florent V. a écrit :


PS : aucun mépris ou condescendance dans ce message. C'est juste une petite pique pas bien méchante.

oOops
ta réponse m'avait échappé Florent.
Je ne l'ai pas mal pris.
J'apprécie ton aide et humour.
Et puis un coup de pied aux méninges ça fait du bien.
Bien à toi,
Philippe