css problem with links

Tagged: browser compatibility, CSS

This topic contains 8 replies, has 5 voices, and was last updated by Jem 1 year, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
August 21, 2011 at 3:40 pm #13950
Anonymous
I just found with my recent layout (http://practice.ancalimesh.net) that obviously I have a css problem with my links.

The idea was to have the links for the navigation and the links in the normal content in a different style.

This doesn’t work however and I can’t seem to find the reason for that.

The code in question is:
```
...

a, a:active, a:hover, a:link, a:visited {

color : #13505e;

text-decoration : none;

}

a:hover {

font-style : italic;

}

...

#navi2 a {

padding : 10px 10px;

text-decoration : none;

}

#navi2 a:active, a:link, a:visited {

color : #f9f5e7;

background-color: #13505e;

text-decoration : none;

}

#navi2 a:hover {

color : #13505e;

background-color: #f9f5e7;

text-decoration : none;

}

...
```
I tend to go with the code I have and just change it around since I’m no 100% expert.

If someone knows what I need to change since I hope it’s just something small I’d be absolutely grateful.

Thanks in advance!
August 21, 2011 at 4:38 pm #14843

Rose
Participant

#navi2 a:active, a:link, a:visited {

is where you problem is

it should be

#navi2 a:active, #navi2 a:link, #navi2 a:visited {

August 21, 2011 at 4:50 pm #14844

Anonymous

OMG I knew it could just be something small, but *that* never occurred to me.

Thank you so much!

Changed that and it works perfectly now!

August 23, 2011 at 2:34 am #14845
Rose
Participant
Nooo worries, it’s definitely one of those css gotchas

incidentally, your CSS could be trimmed down a lot, if you’re interested in optimizing.
```
a  {

color : #13505e;

text-decoration : none;

}

a:hover {

font-style : italic;

}
```
```
#navi2 a {

padding : 10px;

color : #f9f5e7;

background-color: #13505e;

}

#navi2 a:hover {

color : #13505e;

background-color: #f9f5e7;

}
```
August 23, 2011 at 8:20 am #14846

Anonymous

I was confused with this css command.Now I got the solution, thanks.

August 23, 2011 at 3:09 pm #14847

Jem
Keymaster

^ using simply “a” doesn’t always work. I can’t remember which browser/version it is that throws a wobbler but I often find myself having to specify a, a:link

August 24, 2011 at 12:31 am #14848

Rose
Participant

^ I was wondering if there was some reason for people to do multiple when I posted it. I wonder which browser is messed by that, because I always just use a and have never encountered problems, but I don’t do any super rigorous testing…. I test ff, chrome, and ie 7/8/9….

August 24, 2011 at 6:59 am #14849

Amelie
Keymaster

^ I *think* it’s Opera. Can’t be sure though.

August 24, 2011 at 1:00 pm #14850

Jem
Keymaster

It may be IE6 as well. I’m that used to chucking random crap in to support it I end up by habit, even though I’ve not officially supported it in ~2 years!
Author

Posts