Link arrow applies also to linked images

Discussion in 'CSS' started by Werdin, Jun 13, 2008.

0
  1. #1
    I've got a style on all my content links (in joomla) which adds an arrow in front of all text-links. It looks like:

    .contentpaneopen a{
    padding-left: 10px;
    background: url(../images/arrowbullet_text.png) no-repeat center left; list-style: none;
    }
    (contentpaneopen means the container of the content)

    Unfortunately it also applies to linked images. I tried with "img {background: none;}" and "image a", "a img", and theese combinations within ".contentpaneopen a img" etc. But still there's an arrow to the left of all linked images. And that's NOT nice...

    Is there a workaround for this?
     
    Werdin, Jun 13, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You'll likely have to be more specific. Like, is there a box that .contentpaneopen is in?

    If the linked images are also in the same .contentpaneopen then you'll likely either give a class to whichever there is less of, and style accordingly.

    .contentpaneopen a{
    padding-left: 10px;
    background: url(../images/arrowbullet_text.png) left center no-repeat;<-- set horizonal coord first, then vertical
    list-style: none; <-- remove this, a's don't have a list style, only lists do!
    }

    Your html would need a class added something like this:
    <a class="img" href="#"><img src="#"... etc...></a>
    .contentpaneopen a.img {
    background-image: none;
    }

    But if there were more with images than not, then stick the class on the other one... the rule is to use as few classes as possible. If it ended up that all the linked images are inside some other box, then you don't even need classes-- just mention the box.

    Like, if they were in a div called "moreinfo"...
    <div id="moreinfo">
    <a href="#"><img src="#" etc ></a>
    etc...
    </div>
    then simply
    .contentpaneopen a{
    padding-left: 10px;
    background: url(../images/arrowbullet_text.png) left center no-repeat;
    }
    .contentpaneopen #moreinfo a {
    background-image: none;
    }
     
    Stomme poes, Jun 13, 2008 IP
  3. Werdin

    Werdin Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks fo the advice on the order of the coords!

    Unfortunately the main issue still don't work... I guess this is some joomla matter? I tried to alter the html to "<a class..." but it's not possible in the editor. The only thing possible is to apply an <img class> but nothing happens with that...
     
    Werdin, Jun 29, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Dunno if it's Joomla... there may be other CSS floating around which is interfering with your new code or something...

    the reason class on <img> doesn't do anything is because it's not img's who have the image, it's a's... if you cannot reference just certain a's then you can't tell the browser, "show the arrow with THESE a's and not the other a's".

    Are the a's with the arrows in any different containers?

    One last try that might work (but not in IE6 or below) is the only way I know to reference a parent by the child:

    .contentpaneopen a img >a {
    background-image: none;
    }

    This means, the first direct child of .contentpaneopen that is an anchor, no background image. First we referenced the child, img, and the > should go back to the parent we mentioned. I think. I know I've done such a thing with menus before, but it's rather late here and I may be a little confuzled.
     
    Stomme poes, Jun 29, 2008 IP