Links

Hello,

I have a set of images as links e.g

Code: Select all

<a href="#"><img src="img.gif" /></a>

And heres my CSS..

Code: Select all

a {
    text-decoration: none;
    color: #277227;
    border-bottom: 1px dashed #000;
}

a:hover {
    border-bottom: 1px solid #000;
}

However, I do not want the images to appear with a border. How do I go about doing this?

The images should be bg images if they are for links and the image is purely presentational. Why are you using images for links? Is it just a one off or are all your links like this? Have you got a mock-up we could see.

Something like this should work.

HTML:

Code: Select all

<p><a href="#" title="To my first link" class="link1">Link1</a></p>

CSS:

Code: Select all

p a.link1 {
text-indent: -9999px;
display: block;
width: xxpx;
height: xxpx;
background: #fff url('link1img.gif') no-repeat;
}

Something like this would be best I guess. That way the text is still intact.

Otherwise

Code: Select all

a img { border:none; }

should work.

Let me know if it doesn't, I may not have thought it through.

Pete.

Nope, a img doesn't seem to be working.

Try img a then. I always struggle with this. Or maybe just img.

Pete.

Tried both. I'll just give the links a class.

I was told recently to add border: none or was it border: 0 to the css.

Yep, I tried both! I was just wondering if there was a quicker fix because now I have to go through all the pages and give the links classes.

Post the page and the css up here. I am the type of guy that must see the page and play with it.

Your answer lies in the CSS forum ... check the stickies ... most importantly the CSS Beginner FAQ It's in there.

Hi, maybe the image itself has a border. Did you check that?