Tech Off Thread

11 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

CSS issue: Images with borders because they're links

Back to Forum: Tech Off
  • User profile image
    Ambition

    Small problem with the following CSS:

    a, a:link, a:visited
    {
     color: #333333;
     text-decoration: none;
     border-bottom: 1px #333333 dotted;
    }

    a:hover, a:active
    {
     color: #00CCCC;
     border-bottom: 1px #00CCCC solid;
    }

    img
    {
     border-style: none;
    }


    My image links have borders and I don't want them to! [C]

    How do I write a rule to set 'img' link tags to not have borders in hover and active states (currently it works for the normal state)?

    Thanks in advance.

  • User profile image
    Angus

    I think you will have to do this:

    img
    {
    border: 0;
    }

    Or in HTML:

    <img src="http://www.example.com/image.jpg" border="0">

    I have tested the CSS solution and it seems to work.

    Angus Higgins

  • User profile image
    Piroko

    Why not...

    a > img { border: 0 none; } 

    Definitely works for me (in Firefox)

  • User profile image
    W3bbo

    Piroko wrote:
    Why not...
    a > img { border: 0 none; } 

    Definitely works for me (in Firefox)



    Acutally, all you need is this:

    a img {
    border: none;
    }

    (feel free to add !important if necessary)

    IE doesn't support the > selector and the zero border width value is redundant.

  • User profile image
    Ambition

    Thanks, but none of these actually work - on rollover the image still displays a border on the bottom because the a tag is set to. I've tried all sorts of wierd constructs (img:hover, a img:hover, a:hover img) and still the border appears. It is very annoying.

  • User profile image
    Cannot​Resolve​Symbol

    Ambition wrote:
    Thanks, but none of these actually work - on rollover the image still displays a border on the bottom because the a tag is set to. I've tried all sorts of wierd constructs (img:hover, a img:hover, a:hover img) and still the border appears. It is very annoying.


    Sounds like you're getting an underline like you would with text.  Try:

    a:hover img {
    text-decoration: none;
    }

  • User profile image
    Ambition

    Nah, no luck there either. It's definitely a side effect of this code:

    a:hover, a:active
    {
     color: #00CCCC;
     border-bottom: 1px #00CCCC solid;
    }

  • User profile image
    Ambition

    I'm just going to have to put the images and text in seperate divs and style the a tag of those divs seperately.

    Problem worked around.

  • User profile image
    Cannot​Resolve​Symbol

    Ambition wrote:
    Nah, no luck there either. It's definitely a side effect of this code:

    a:hover, a:active
    {
     color: #00CCCC;
     border-bottom: 1px #00CCCC solid;
    }


    Well, then that's what !important's for...  although it's probably too late now.

    a:hover img {
    border-bottom: none !important;
    }

    (why are you using border-bottom to underline all your links?)

  • User profile image
    W3bbo

    CannotResolveSymbol wrote:
    (why are you using border-bottom to underline all your links?)


    It allows you to get a different color than text-decoration: underline; (which uses the text's color)

  • User profile image
    W3bbo

    CannotResolveSymbol wrote:
    (why are you using border-bottom to underline all your links?)


    It allows you to get a different color than text-decoration: underline; (which uses the text's color)

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.