SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing unerline on img when using border-bottom-style

    Hello

    I am using the following to get thick underlines on any text links:

    Code:
    a:hover {border-bottom-style: solid; border-bottom-width: 2px;}
    But I do not want to have this underline on any images. I've tried a range of different ways to stop the underline from appearing on my images but no luck. What would be the correct syntax to get this working?

    Many thanks for any help you can provide.

    Gaz

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a img { border:0; } -- ? (insert this AFTER that declaration/statement)
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried that one - doesn't work

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can i see the page or a snippet?
    maybe...

    a img:hover { border:0; }
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check your pm's - don't really want to post the url on here and have it showing up in every search engine listing on the web.

    Tried that one you just posted but no luck.

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Property border-wdith doesn't exist : 0

    maybe fixing that error will do it?

    How about closing the image tag properly with "/>"
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops! typo!

    thought that might have been the mistake (as has been the case many times before!) but it hasn't solved it - thanks for pointing it out though - i've tried tidying it up now but still haven't found a solution?

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The border is on the link. Making sure the <img> in the <a> doesn't help.

    You need to give a class to <a>s that contain an <img>. (You can also use the border-bottom property instead of using border-bottom-style and border-bottom-width.)
    Code:
    <a class="hasImg" href="#"><img src="example.jpg" alt=""></a>
    Code:
    a:hover {
      border-bottom: 2px solid;
    }
    a.hasImg:hover {
      border-bottom: 0 none;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers mate - that worked!

    Only prob is that I am creating a template for a site that will be using a CMS - what will happen when images are inserted by the user - are they going to have the line under them?

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I suppose you could use RegExp to add the class to links that contain an <img>.

    If you don't know RegExp well enough to figure it out on your own, ask in the appropriate server-side language forum.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •