The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS <a> style spilling into imgs

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #29743

    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!


    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.



    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.


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

    a img { border: none; }

    to their reset.

    Do you have a link to the site?


    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:

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.