SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove style only for linked images.

    Hi on my site http://bit.ly/dfcU0O I have set dotted underlines for links, I want to make linked images in the content have no dotted underline though, how can I do that? On the page referenced here the image displays a dotted underline, which I want to remove. Other text links should retain the dotted underline.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Your website is password protected so couldn't see what you meant but if you want to style specific items and not others you use a CSS class.

    You can set the class to apply to the items you want to have styled borders or underlined text and one that says no border or underline or do you mean the images have a focus outline. I assume you meant Border styles.

    For example class .c1 { border-bottom: thick solid red; } and class .c2 { border-bottom: none; } <p class="c1">xyz</p> and <p class="c2">xyz</p>

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry the user and password are both : demo

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by drtanz View Post
    Hi on my site http://bit.ly/dfcU0O I have set dotted underlines for links, I want to make linked images in the content have no dotted underline though, how can I do that? On the page referenced here the image displays a dotted underline, which I want to remove. Other text links should retain the dotted underline.
    If the underline is set on the link (which is the usual way to do it), there's no easy way to remove the underline on images that are within links.

    If the links contain either text or an image, you can put a class on one set or the other and target the underline that way.

    Another option, which is a bit of a fudge but works pretty well, is to just move the image down a couple of pixels so that it covers the underline, something like this:
    a img {position:relative; bottom:-2px;}

  5. #5
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You could always add a class to the A tag that wraps the image

    Code:
    <a href="page.html" class="imagelink"><img src="image.png" alt="xxx" /></a>
    
    a.imagelink { border: 0; }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •