boardered image that is linked: removing unwanted border

I've got images on a site i'm working on that i've created a border around to allow some separation from content and I also use it as a way to caption the photos. Many of the photos on the site are linked to other photo's or other pages.

In IE, both borders are showing up, and I can't seem to figure out how to not get that to happen...

css
.imgfloatright { border:solid 1px #999; float:right;
width:325px; padding-bottom:2px; text-align:center;
color:#666; font-size:small; margin-left:5px;}

HTML
<span class="imgfloatright"><a href="carbon-wheels.html">
<img src="images/carbon-tubulars.jpg" alt="PSIMET Custom Carbon Fiber
50mm deep tubular wheelset" /></a><br />
PSIMET's Custom 50mm Deep Carbon Clincher wheelset</span>

Try this:.imgfloatright a {border:0;}

Try this:.imgfloatright a {border:0;}

That doesn't seem to do it.

I've tried getting at what you are getting at, i presumed my syntax was wrong.

I've got images on a site i'm working on that i've created a border around to allow some separation from content and I also use it as a way to caption the photos.

In IE, both borders are showing up, and I can't seem to figure out how to not get that to happen...


The above two statements are contradicting. first statement says, you added a border to separate the image from contents and second one says you don't want a border.

The above two statements are contradicting. first statement says, you added a border to separate the image from contents and second one says you don't want a border.

Right, thus the dilemma.

The other thing I tried was to simply add the rules for .imgfloatright to a linked image. Maybe I had the syntax wrong though?

if .imgfloatright = a.imgfloatright wouldn't that give me what I want? Or would it look like something else?

Well with the code snippets we've seen my CSS should have done the trick. If it didn't work then the problem could be conflicting CSS, a missing or incorrect DTD, or any number of other things.

Can we have a link to the live test page?

www.psimet.com

I'm seeing the same border appearances between FF3 and IE7 so I'm not sure if I'm solving the right issue, but how about this:.imgfloatright a img {border:0;}

Right, thus the dilemma.

The other thing I tried was to simply add the rules for .imgfloatright to a linked image. Maybe I had the syntax wrong though?

if .imgfloatright = a.imgfloatright wouldn't that give me what I want? Or would it look like something else?

Yep, the syntax is wrong there for what you were trying. The "a.imgfloatright" would be for link <a> tag which actually had the class of "imgfloatright" which yours does not have (as far as I can see). So this part of your CSS:
a.imgfloatright, a.imgfloatright:link, a.imgfloatright:visited, a.imgfloatright:active {border:solid 1px #999;}

That particular style rule should have no bearing on anything in your page at all.

I'm seeing the same border appearances between FF3 and IE7 so I'm not sure if I'm solving the right issue, but how about this:.imgfloatright a img {border:0;}

That's what we're looking for.

Thanks.