WordPress.org

Ready to get started?Download WordPress

Forums

How to separate link style to images? don't need the underline! (25 posts)

  1. saicode
    Member
    Posted 6 years ago #

    I have added this CSS code to get different style for the clickable links.

    #content a:hover, a:active {
    	color:#8e5b2e;
    	border-bottom:#a16c3d 1px solid;
    }

    but it's looking really weired on images...as the line is coming under clickable images too!

    is there any way to separate the images out from the above style.

  2. spscheele
    Member
    Posted 6 years ago #

    I have the same problem but I don't think this is possible due to nature of CSS and the order it will apply styles.

    I have a link style on my <p>'s but when an Image is put inside of a <p> (normal blog posts) with a link around it, it inherrits the <p> link style and there is no way to escape that. You can;'t go back in CSS.

    The only way to do this is by adding classes to either your image a or the text links, that will style it differently.

  3. moshu
    Member
    Posted 6 years ago #

    Why this wouldn't work for you?

    a:link img {....}
    a:visited img {...}
    a:hover img {...}
    a:active img {...}
  4. spscheele
    Member
    Posted 6 years ago #

    for me or for Saicode?

  5. moshu
    Member
    Posted 6 years ago #

    Both of you.

  6. Joni
    Member
    Posted 6 years ago #

    I have a link style on my <p>'s but when an Image is put inside of a <p> (normal blog posts) with a link around it, it inherrits the <p> link style and there is no way to escape that. You can;'t go back in CSS.

    Do you want your link styles to be different in paragraphs than in the rest of your blog? I can see no reason to specify them there.

  7. spscheele
    Member
    Posted 6 years ago #

    wel.. I have this in my css:

    p a, p a:link, p a:visited {
    	color:#333;
    	text-decoration: none;
    	padding:2px;
    	font-weight: bold;
    	border-bottom: 1px dotted #ccc;
    	}
    
    p a:hover {
    	font-weight: bold;
    	color:#333;
    	background:#ffff66;
    	padding:2px;
    	}

    To style only the textlinks inside a <p>

    So when I put an image inside a blogpost you get:

    <div class="entry-content">
    <a href='http://www.url.com'><img src="image.jpg" alt="" title="" width="500" height="290" class="alignnone size-medium wp-image-647" /></a>

    And then the images inherrit the a style, and I tried using it like p a:link img {} but that doesn't work...

    Or am I missing something?

  8. spscheele
    Member
    Posted 6 years ago #

    @jonimueller: I want to have different link styles for my body text, navigation and maybe some more different things indeed, but maybe you have a better solution to do that?

  9. Kalessin
    Member
    Posted 6 years ago #

    You can;'t go back in CSS

    You can't, but you can be more specific. To spell out what Moshu said:

    #content a:hover img, a:active img {
    	border: none;
    }

    BTW, did you notice that you only specified the #content container for the a:hover and not for the a:active?

  10. Joni
    Member
    Posted 6 years ago #

    Well the only good reason for different link styles within the same stylesheet/design is because some of the links appear on a different color background.

    Too many different link styles, just for the sake of them, can confuse and frustrate your site's visitors. Consistency is the key to a pleasant online experience. Just my two. Worth exactly what you paid... :)

  11. spscheele
    Member
    Posted 6 years ago #

    @Kalessin: I tried but that doesn't work, they keep getting the other link style...

  12. spscheele
    Member
    Posted 6 years ago #

    @jonimueller: even when I set a global link style and a specific img link style, the images keep inheriting the global style, whatever I try to do.

  13. jberghem
    Member
    Posted 6 years ago #

    A lot of people forget than when you look at an (X)HTML page without any CSS styles imported or attached, you're not looking at a clean style-less page. But you see the browsers default style. The browser styles make header tags bold and lager, adds margins to the body and blockquotes, underlines links and turns them blue etc.

    When you want more control over your styles you can undo a lot of these styles with a wildcard selector in your CSS file. Just add something like this to the top of your stylesheet to rid you of those unwanted margins and other browser styles:

    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    	text-decoration: none;
    	font-style: normal;
    	font-weight: normal;
    }

    This can also help solve those unexplained things you can't seem to get rid of no matter how specific you make certain selectors.

    You can als try using the !important; option behind the value it doesn't seem to pick up. If it works you should look for a conflict with an other selector (maybe a stylesheet from a plugin or something that mucking it up)

  14. spscheele
    Member
    Posted 6 years ago #

    @jbergem: that's a good tip indeed, to clear the styles already present before you begin your stylesheet. That doesn't solve my problem unfortunately, neither did the !important; option.

    I'm testing this in FF by the way, so maybe it's just a FF thing?

    I think the problem is my text link style is to specific or something. It sets a padding, a color, a border, etc. I can't really overrule that it seems, not even by making the image link styles more specific.

    So I'll have to find a way to automatically add a class to my image links. Anyone?

  15. Joni
    Member
    Posted 6 years ago #

    Are you declaring them in the proper order in the stylesheet? Pseudo classes like links have to be in a specific order and earlier some others posted link info and it was in that precise order, namely:

    a:link img {....}
    a:visited img {...}
    a:hover img {...}
    a:active img {...}

    This means that if you have this in your stylesheet:

    a:active img {...}
    a:visited img {...}
    a:link img {....}
    a:hover img {...}

    It likely won't work. And Firehog is notorious about being sloppy with page refreshes. Sometimes not only do I have to clear its cache, but I often have to close out and relaunch it or worse yet, go to my command line and do this: ipconfig /flushdns

  16. Ivovic
    Member
    Posted 6 years ago #

    I think it's important to accept that there's just some stuff you can't do...

    and putting borders and crap on your anchor tags is one of those things, unless you want it to happen on *all* anchor tags.

    'nuff said.

    really, the effect isn't worth it anyway - if you want underlines, use bloody underlines, not borders.

  17. spscheele
    Member
    Posted 6 years ago #

    @Ivovic: I like my underlines to be "dotted", so you tell me how to do that without borders...

    I think your right about it not being possible unless I want it everywhere . So I'll have to add a custom class for my images or image links. I'll have to modify one of the wordpress php files for that I think (if I don't want to add it myself each time), but which one?

  18. Ivovic
    Member
    Posted 6 years ago #

    I can't tell you how to do it without borders, but I can tell you to stop making your neurosis everyone else's problem.

    it's just *not* that important.

    ... and if the style of underline is that important to you, the code's right there, here's a shovel.

  19. spscheele
    Member
    Posted 6 years ago #

    @Ivovic: sjees, relax man, I'm just looking for a solution to my problem. If you don't care, just don't react.

  20. Joni
    Member
    Posted 6 years ago #

    Have you tried this, put it somewhere toward the top:

    img a, img a:link, img a:visited, img a:hover {
        text-decoration: none !important;
    }

    Try it without the !important statement first and if it works, then you will be fine. I'm worried that by using the "scorched earth" method (the !important statement), there might be an instance when you might WANT the linked image to have an underline. If so, you'd have to specifically declare it in whatever division it's in and that !important statement might get in the way.

    Does this make sense? Oh, and found this article discussing borders and links:
    http://www.csstrickery.co.uk/2007/12/08/borders-as-underlines/

  21. Ivovic
    Member
    Posted 6 years ago #

    if 'img a' works, that'd be a bit of a css coup... given that links aren't inside image tags.

    interesting.

  22. Joni
    Member
    Posted 6 years ago #

    Oops, you're right! It's bass ackward. Haven't had my requisite ration of caffeine yet and the sun she's almost gone. And you had to make me go prove something to myself, didn't ya? But I needed the exercise.

    This

    a img, .sociable a img {
    	border: none important;
    }

    works. I have it up on a test site at http://wordpress.mytestbed.com. The sociable plugin that has all those little icons was surrounded by a 1 pixel border. The *only* way to get those suckers to go away was to add that second declaration in there. And if you don't put !important those borders won't go away.

    Gah. {{slinks away in shame}}

  23. Joni
    Member
    Posted 6 years ago #

    That got me to thinking (something I haven't done much of this weekend).. The reason that I had to add that specific rule for the sociable plugin is...? At first I thought it was because it embeds a stylesheet which trumps the style.css that WP calls in. But in that embedded stylesheet we have this little nugget:

    .sociable img { border: 0; }

    So what's up with the borders? Weird.

  24. Ivovic
    Member
    Posted 6 years ago #

    the solution is to give images their own href attribute, you hear me w3c?

    ps: extra-marital consolation available. enquire within :P

  25. jberghem
    Member
    Posted 6 years ago #

    Don't overlook the specificity rule in CSS. Try to make the global site styles as unspecific as possible. Then it makes it easier to override those stiles in specific situation. Try to use classes as selectors instead of ID's because ID's are more specific than classes since ID's have to be unique on a page and classes don't.
    If for some reason the !important; doesn't work, you're probably dealing with another !important; value inside one of the stylesheets linked or embedded in the generated page. The !important; value should only be used for troubleshooting and not be left in the stylesheet. Unfortunately many plugins have their stylesheets filled with !important;'s to override the themes' stylesheet.

    I can only recommend you look at the source code of the generated page and find all the styles linked to or embedded in it. Find all the !important; instances and check whether removing them solves the problem. The Developers toolbar for Firefox can be a great tool to do this with.

    @Ivovic: You are right, there are some things you can't do with CSS. But this problem is not one of these things. It is very simple to have 4 links with images in them on the same page and style each of them individually with a different style, color or thickness of border or no border at all. It's just a matter of being specific. In any case asking the W3C to change the (X)HTML to solve a CSS problem doesn't make sense.

    @spscheele: have you tried adding the #content in front of your selector? this makes it more specific. (just like jonimueller did with the class selector sociable ) If the XHTML code you're trying to target looks like this:

    <body>
    <div id="content">
    <p>text... <a href="#" class="link"><img src="image.jpg" /></a></p>
    </div>
    </body>

    You can specify the CSS for the image like this:

    body div#content p a.link img {
    	border: none;
    	text-decoration: none;
    }

    Chances are that there aren't any other CSS rules as specific as that in any of the stylesheets of any plugin. But only do this as a quick fix. try to find the conflicting CSS and either get rid of it or make it more or less specific to target what it was written for.

    @jonimueller: .sociable img { border: 0; } is targeted at the images while the border is styled by the link. The border, technically speaking, isn't around the image, it's around the link.

    @all: Patrick Griffiths explains the whole CSS specificity deal on his HTML Dog website. Here's the direct link: http://www.htmldog.com/guides/cssadvanced/specificity/.
    The HTML Dog website is a great resource when you want to learn how to design websites the "right" way instead of the "looks alright" way. He offers free (X)HTML and CSS tutorials online on 3 different levels and explains it really well. If you know what he explains in those tutorials, this will all seem like kid stuff.

Topic Closed

This topic has been closed to new replies.

About this Topic