Problems using images as links

[kaitco]

I am using several images as links on a page and I want to do it using CSS. For some reason I am having trouble changing the color of the link border which forms around linked images. Is there a specific property I am supposed to be using? All of the attributes I can think of using have not been working.

Also, I have managed to recreate my tables using <div>'s, however, I wanted to know if there was a way to center the text displayed in relation to the image.

Here is a link to what I mean:
www.doriennesmith.com/tablehorror.html

Many thanks in advance!

[_Aerospace_Eng_]

Do you want to change the border colors or just get rid of them? Do you have a link to your site?

[kaitco]

I would actually like to know how to do both.

Here is the link, but I am still hammering out the details of the positioning:

www.calvin.doriennesmith.com

[singedpiper]

w3c up the tutorials on: line-height, text-decoration, and the :link, :visited, :hover, and :active pseudo classes

[kaitco]

Can anyone else help with this? I have done searches at w3c and wcschools and I still cannot find the information I need.

I want to change the color of the borders given to images used as links and I also want to know how to remove the border altogether.

I am also having trouble vertically centering (I have searched for this too) text within a line of a paragraph. Line-height changes the space between lines of a paragraph, but I need to know if it is possible to center the text as shown in this link: www.doriennesmith.com/tablehorror.html

:( Please help!

[Pennimus]

Hi,

You use the a: selectors to change the colour of a border around a linked image. You have to use these in combination with a particular class that you assign to the div containing the image, or universally to the img selector (which probably makes more sense, since it's unlikely you will want to have more than one link style for your images).


img a:link {
border-color: #XXXXXX;
}

img a:hover, img a:focus {
border-color: #YYYYYY;
}


etc...

As for your second query, the vertical-align property sets the allignment of elements contained within the element you assign the property to. Therefore, to get two elements to line up vertically as in your example, you will need to apply vertical-align: middle; to the element that contains both the button and the text.

EDIT: To remove the border altogether, simply set border: none; :thumbsup:

[Pennimus]

Accidental double post, my apologies

[kaitco]

SUCCESS!! Yay, thank you very much! :D