Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Image Rollover Issue

    Hey guys,

    I'm having a problem with my images that are links. When you roll over them they get underlined and I'd like to stop this.

    Page: http://tombraiders.net/katie/CEC/index.html

    User: letme
    pass: in

    I'm not sure where I've gone wrong. The CSS for the images is:

    img{border: 0px;}

    a{outline: none;}
    Thanks,
    Katie

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Style

    How does this rule in style.css look to you:
    Code:
    #column2 a:hover {
    border-bottom: 1px solid;
    }
    It's just doing what you told it to...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ugh lol. How can I have it not affect the images but still the normal links then?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Underline

    Instead of a border you could toggle the underline on hover; this is a text property and does not apply to images.
    Alternatively, you could give the image links a separate class with a dedicated rule to turn the border off.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I got rid of those two lines and put this but it still doesn't work...

    .img {
    border: 0;
    }
    .img:link {
    border: 0;
    }

    .img:hover {
    border:0;
    }

    .img:visited {
    border:0;
    }

    .img:active {
    border:0;
    }

  • #6
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    On you're style.css, you have the following code:

    Code:
    #column2 a:hover {
    border-bottom: 1px solid;
    }
    Try changing it to:

    Code:
    #column2 a:hover {
    text-decoration: underline;
    }
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #7
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Beautiful! It works! Now I just have to fix it for "column1"...but I'm not sure where to put it...

  • #8
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Actually, that's not what I want. Now links aren't getting the double underline that I put on it. I want the images *only* to not have the double underline.

    Can this be done?

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Try:

    #column2 img a:hover {
    border: none;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Unfortunately that doesn't work

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,661
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Of course it doesn’t because it is saying: “Set the border width for links inside images within column2 to zero.” which doesn’t make sense. The only CSS way to specifically address images in links is to assign a class to the links that contain the images and apply that style to that class.

  • #12
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Where can I find the correct code for this?

  • #13
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Code:
    <style type="text/css">
     a { text-decoration: none; padding-bottom: 1px; }
     a:hover { border-bottom: 1px solid #000; text-decoration: underline; }
     a.imgLink:hover { border-bottom: 0; text-decoration: none; }
     /* Example:
          <a href="index.php?id=11" class="imgLink"><img src="images/linktohome.php" alt="Homepage" /></a>
    */
    </style>
    Try this (just apply it)
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.


  •  

    Posting Permissions

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