[ISSUE] A little underscore next to an image link

HTML & CSS
1

I am having an issue where I have images as buttons for my navigation bar. Well I am getting a little underscore that disappears when I put my cursor on Home. So I know it is associated with the link I have on the image. However I can’t find anywhere in the CSS where it defines having an underscore. It also doesn’t happen on any of the other buttons. any suggestions?

Thanks in advance.

2

Looks like you have a space somewhere in your link code.
Can you post the html and relevant CSS please?

Welcome to SitePoint

3

Thanks for the welcome! :smiley:
Below is my Html.


<ul id="menu">
    <li>
        <a href="/Home/Index">
            <img class="homenavbutton" src="/Images/Web/NavButtons/homebuttoninactive.png"/>
        </a>
    </li>
    <li>
        <a href="http://fake.address.com">
            <img class="mumblenavbutton" src="/Images/Web/NavButtons/mumblebuttoninactive.png"/>
        </a>
    </li>
</ul>

Below is my CSS


/* TAB MENU   
----------------------------------------------------------*/
ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li a {
    color: black;
}

a:link
{
    color: #000099;
    text-decoration: underline; <-- this doesn't do anything when removed.
}

a:visited {
    color: #0000FF;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #33CCCC;
}
4

That code doesn’t work for us, as it just produces a blank screen without the images. We’ll need a live link to be able to help.

5

Browsers apply an underline to anchors by default, so you need to override it with text-decoration:none

ul#menu li a {
    color: black;
    text-decoration: none;
}
6

If the text decoration was set to ‘none’ the anchor underline will disappear and like Mike said; if the code were tighter, i.e. remove white space in the syntax between the A and IMG it wouldn’t show either.