CSS – remove linked image underline

  • dponce80

    (@dponce80)


    19 years, 3 months ago

    I feel that this should be so simple. Yet I know so little! 🙂 In the stylesheet, I have it so that all my links are underlined with a 1px dash. On mouse hover, it becomes a full line. Really pretty, except when it also underlines images! I want to put images (such as a blog directory subscription icon) and not have it become underlined as well. Is there a way to manually specify an exception to the stylesheet? Or something… Can this be done?

    Thanks guys.

Viewing 4 replies - 1 through 4 (of 4 total)
  • yngwin

    (@yngwin)

    19 years, 3 months ago

    Probably the most straight-forward way is to give links that contain images a class, like:
    <a href="xxx" class="image"><img src="x" alt="" /></a>
    and put in your stylesheet:
    .image {
    text-decoration: none;
    border-bottom: none;
    }

    Thread Starter dponce80

    (@dponce80)

    19 years, 3 months ago

    Wow… that worked almost perfectly, with one little addition that I was able to figure out myself. Since the mouse hover was also underlined (instead of dashed), i had to add another little piece of code to the stylesheet, namely
    .image:hover {
    text-decoration: none;
    border-bottom: none;
    }

    Thanks a lot, now it works like a charm!

    yngwin

    (@yngwin)

    19 years, 3 months ago

    You can group these together like
    .image, .image:hover {

    Ronny

    (@ronny)

    19 years, 2 months ago

    argh. can’t get it to work for my blog sticker/button images things. followed the instructions to the letter and double checked my code. but there’s still an underline.

    forget about the “reading list” book cover images. those images are part of another plugin… but the blog stickers are using good old fashion html

    <li id="groupies"><?php _e('Groupies:'); ?>
    <ul>
    <li><a href="http://shittyblogsclub.blogcafe.com/shittyblogsclub" class="image" target="_blank" ><img src ="http://www.fish8me.com/images/shittyblogclub.gif
    " border="0" Title="Shitty Blogs Club" alt="" ></a></li>
    </ul>
    </li>

    any ideas?
    http://www.fish8me.com

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS – remove linked image underline’ is closed to new replies.