a tag over image+text but seperate styles?

I have an "a href" tag over an image and text so I only have to change one URL.

In the css I have "a" links set to a dashed border-bottom and a solid border-bottom on rollover. It seems to add a border to the bottom of the image aswell.. which also changes on rollover.

Obviously my problem is, I only want the text to be bordered.

You can see what I mean here:
http://www.sneakyweaselstudios.com/newsws2/

I've made it a text decoration rather than a border which doesn't do anything different.. except limit me from using dashes. :/

I've tried giving the image a class and changing the style to something without borders or border-bottoms. I've giving all img tags no border-bottoms.

I've tried a lot. Nothing changes.

Please help, thank you..

P.S... sorry about the positioning for IE users.. gotta fix that...ghey

Hello spoofm0nkey,
You must have fixed it?
It seems to be working for me when I look at it with IE6, IE7 and FF2...

I didn't change anything. I've seen it in FF 2.0 and older versions... I've seen it in IE aswell

I speak of the line under the image. You can see there's one under the image AND the text, I only want it under the text.

There are two things I can think of. First, split the anchor to enclose the image and text separately; or second, a bit of trickery can be used. If you have the space to do so, you could position the image relative and move it down three pixels to cover the border.

a.dashed img {
position: relative;
top: 3px;
}

It works.. it's a problem for IE... but thanks for that sollution. Just kinda seems.. ehg. I shouldn't have to do it this way, I think I've seen a link and an image put together where only the link is underlined..

Another way would be to not put the border on the anchor but on the text itself. So you would need to wrap the text in either a span or em or strong or use some other hook...

See if adding the following to your stylesheet helps:

a img {border:none;}