Log in

View Full Version : Baffled about blue/purple link borders



Sliight
02-17-2008, 06:11 AM
It's been ages since I've done a web page, yet I'm going to make one for my best friend. I think I have the CSS correct, but it's obvious I do not.

Here's the link to the page http://sierramobilesound.com if you want to glance, but basically the blue link border, and purple visited border is showing up on the linked photos.

Here's my CSS


/*This is the main CSS sheet for format of all pages appearance*/

body {
background-color: #000000;
}

#content {
background-color: #000000;
position: static;
display: block;
width: 100%;}

#logo {
position: relative;
top: 25%;
text-align: center;
}

#car {
position: relative;
top: 25%;
text-decoration: none;
margin: 0em;
padding: 0em;
text-align: center;}

#car a:link {
border: none;
text-decoration: none;}

#car a:visited {
text-decoration: none;
border: none;}

#car a:hover {
text-decoration: none;
border: none;}

#car a:active {
text-decoration: none;
border: none;}

#logo is the sierra logo, and #car has the two linked photos in that div. Once I create the home theater photo it will be the 2nd photo in group.

I'm sure it's silly what I've forgotten, however I would really appreciate any help anyone can offer.

Thanks!!!

Sliight
02-17-2008, 06:19 AM
I would have seen that adding img would have solved my problems. Here's the thread which answered my question...

http://www.dynamicdrive.com/forums/showthread.php?t=13477

So strange that on my original website I never ran into the border issue.... hrm...who knows.

Thanks,

boogyman
02-18-2008, 02:21 PM
Links by default have an underline. An image link by default doesn't have the underline link, but rather a border around the image.

Also by default the "link" selector or unvisited link is blue, while a visited / selected link is purple.

To get rid of these, add a CSS border rule to the image links and you will see them disappear



a:link img, a:visited img, a:hover img, a:active {border:none}

and now any image link on the page will now disappear.

You did this properly, but whenever you are declaring pseudo selectors, you should do them in the order of
:link
:visited
:hover
:active

If you find it difficult to remember that order think of it this way

LoVe HAte your anchors