CSS links behaving differently in Chrome and Safari vs Firefox

Question

currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:

<a href="link.html" target="_blank">Link title <img class="leaving" /></a>

and css:

.leaving {
    background-image: url("images/leaving.png");
    height:10px; width:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}

how do i get rid of the border?

also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.

<a href="link">
<h3>Title</h3>
</a>

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?

thanks.

Answer 1

you have a possible bug in your code :)

Here's what you have so far:

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)

Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:

a h2, a h3{
    color:#00264B;
    text-decoration:none;
}

Notice that I've added another "a" to the CSS

Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:

h2 a, h3 a{
    color:#00264B;
    text-decoration:none;
}

But that might not work with your existing code:

Hope this helps