Two problems I can see at the moment.

 

Firefox is putting borders around my linked images. Fair enough, I just put

 

a{

border: none;

 

}

 

in my css. But the borders are still there

 

Another problem with the same kind of css, some of my link colours aren't displaying correctly..

 

a:link { 
color: #564b47;
text-decoration: none;
}

a:hover { 
color: #ccccaa; 
text-decoration: none;
}

a:visited { 
color: #564b47;
}

a:active { 
color: #564b47;
}

 

Why is this? I don't remember having this problem before, but I may be mistaken.

 

Might be an obvious answer, apologies if it is, thanks.

For your first problem, use 'a img' instead of just 'a'.

Your second problem might be to do with the order of your declarations.

They should always be declared in the following order:

a:link {
color: #564b47;
text-decoration: none;
}
a:visited {
color: #564b47;
}
a:hover {
color: #ccccaa;
text-decoration: none;
}

a:active {
color: #564b47;
}

think LoVe HAte

Just to add on with a follow-up question... when you group the pseudo-classes (a:link, a:visitied...) does active still need to come below hover?

 

Or could you do for example:

 

a:link, a:visited, a:active {
color: #564b47;
text-decoration: none;
}

a:hover {
color: #ccccaa;
text-decoration: none;
}

 

 

Cheers,

 

/Doug

The key to remembering the linking order in CSS is the “LoVe HAte” relationship.

 

a:link

a:visited

a:hover

a:active

 

Hope this helps.

Ahh i forgot the whole LoVe HAte thing

 

Thanks for clearing that up

Two problems I can see at the moment.

 

Firefox is putting borders around my linked images. Fair enough, I just put

 

a{

border: none;

 

}

 

in my css. But the borders are still there

 

Just put the following code:

 

img {
outline:none;
}

 

That should fix it in firefox.