<a> style spilling into imgs

[JoshWhiteDesign]

Hey guys,

I was hoping someone could give me some guidance on practicing good technique of proper styling because I think I’m missing something. This was happening in my most recently built WP site.

My dilemma is that I’d like to style my links (<a>) with a background-color and border to give them a little more depth. My problem is that it’s applying those attributes to my <img> tags that are given links to wrap around them. I’ve tried adding things like img a { background-color:none;border:none } and other resets but the link css always seems to override it. The only thing that seems to work is specifically adding "style=border:none;background-color:none" to the <a> tag. But that’s a terrible practice as you build the site.

Am I missing something way obvious like a reset that I haven’t accounted for?

Thanks in advance!

[wswingle]

The style is cascading ☺ But I suppose you know that. The styles are being applied to the anchor wrapping the image, so you would need a selector that targets the parent a tag which is surrounding your image. Unfortunately, I don’t think their is one.

Classes applied to either type of a tag will solve the problem.

A tiny bit of jQuery will help too (either by adding a class to the parent a tag or removing style declarations), but even then, tis alot easier if you just use classes in the markup and address them in your css rules.

Wayne

[JoshWhiteDesign]

Thanks for the info… I was under the impression that I was able to globally set stuff like that and never need to apply a class to each element. So I’ll just need to plan ahead and know. It’s good to know that for sure though Thanks again I appreciate it.

[TheDoc]

It shouldn’t be like that. Most people add:

a img { border: none; }

to their reset.

Do you have a link to the site?

[JoshWhiteDesign]

Hmm… odd – it’s not doing it in Chrome or FF any longer. Possibly I was cachine the old css file? But it’s still occurring in IE, so you can see it here: http://wibd.net/resources/

I have the code you mentioned below in the reset in addition to a:hover img.

[Author]

Posts