cambiare il colore di un link

[max103]

devo modificare un link con una classe ma non mi cambia il colore

css

a:link{
	color: #333;
}
.selected {
color: #FF0000;
}

html

<li class="selected">Link

[Leilond]

La classe l'hai messa su li e il colore da cambiare è su <a>
devi scrivere così

.selected a{
color: #FF0000;
} 

In questo modo gli dici "colore di tutti i tag a all'interno di un tag con class selected"
Questo poichè il selettore sul tag <a> andrà sempre a coprire qualsiasi proprietà ereditata

[max103]

e infatti funziona

ora se li si trova dentro

<div id="menutop">

dovrebbe funzionare anche così (solo per capire)

#menutop li .selected a

e invece non funziona, perché?

[Leilond]

Originariamente inviato da max103
e infatti funziona

ora se li si trova dentro

<div id="menutop">

dovrebbe funzionare anche così (solo per capire)

#menutop li .selected a

e invece non funziona, perché?

Perchè come l'hai scritto tu significa

Un elemento con id="menutop" con dentro un[*] CON DENTRO un elemento con classe "selected" con dentro un <a>
Il tutto per quel semplice spazio tra "li" e .selected
Prova così

#menutop li.selected a

Niente spazi tra "li" e ".selected"

[max103]

ok, adesso funziona... ma solo su FF
anzi: ho due menu uno orizzontale sopra e uno verticale a sinistra, quello sopra funziona sia su FF che su IE, quello di sinistra solo su FF :master:

css

/* menutop */
#menutop {
	height: 40px;
	text-align: center;
}
	#menutop ul {
		list-style:none;
		margin:12px 0;
		padding:0;
	}
		#menutop li {
			display: inline;
		}	
			#menutop li a:link, #menutop li a:visited {
				height: 22px;
				padding: 4px 15px 15px 13px;
			}
			 #menutop li a:hover {
				color: #FF0000;
				background-color: #FFF;
				text-decoration: none;
				background-image: url(img/v10.jpg);
				background-repeat: no-repeat;
				background-position: left center;
			}
				#menutop li.selected a {
					color: #FF0000;
					text-decoration:none;
				} /* questo funziona su IE e su FF */
/* menu di sinistra */
#menu {
	float:left;
	width: 180px;
	height: 100%;
}
	#menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}
			#menu li a:link, #menu li a:visited {
				display: block;
				padding: 4px 0 0 15px;
				height: 22px;
				text-decoration: none;
				background-image: url(img/v10.jpg);
				background-repeat: no-repeat;
				background-position: left center;
				border: 1px solid #FFF;
			}
			#menu li a:hover {
				background-position: 163px center;
				border: 1px solid #CCCCCC;
			}	
				#menu li.selected a:link {
					background-image: url(img/v10.jpg);
					background-repeat: no-repeat;
					background-position: 15px center;
					padding: 4px 0 0 30px;
					color:#FF0000;
				} /* questo funziona solo su FF :((( */

html

			<div id="menutop">
				<ul>
					[*]Home
					[*]Link
					<li class="selected">Linker
					[*]Linked
					[*]Linky
					[*]Linkin Log
				[/list]
			</div>
			<div id="menu">
				<ul>
					[*]Home
					[*]Link
					[*]Linker
					<li class="selected">Linked
					[*]Linky
					[*]Linkin Log
				[/list]
			</div>

[max103]

rettifico:

cambiando il css del menu di sinistra in:

#menu li.selected a {

adesso si visualizza anche in IE

l'unica cosa non mi visualizza:

padding: 4px 0 0 30px;

praticamente il menu selected dovrebbe avere un padding diverso, ma lo visualizza correttamente solo FF

[max103]

allego scattovideo

[Mich_]

Come e` noto, il padding e` uno di quegli attributi che inIE6 (quirks mode) sono implementati in modo diverso dallo standard.

Se puoi passare a XHTML Strict, dovresti eliminare questo tipo di problemi.
In alternativa:
- usa margin al posto di padding (se non hai sfondi, la cosa dovrebbe essere semplice)
- inserisci un CSS specifico per IE6- (tramite commenti condizionali) che corregge il comportamento di quel browser.

[max103]

sono già in xhtml 1.0 Strict

ho risolto così:

margin: 0!important;
margin: 0 0 0 15px;

[Mich_]

Sicuro che i browser interpretino XHTML Strict?
Non e` che per caso hai qualcosa prima del DOCTYPE? (cosa che fa perdere il doctype ad IE6)

Quell'hack di per se` non da` problemi, ma potrebbe darne se associato al padding in IE7