Can't seem to remove underline style from image links?

The html is as follows:

<ul id="members">
    <li><a id="Chris"><img alt="Chris" src="images/chris.jpg"/></a></li>
    <li><a id="Carlin"><img alt="Carlin" src="images/bass2.jpg"/></a></li>
    <li><a id="Mikael"><img alt="Mikael" src="images/drums.jpg"/></a></li>
    <li><a id="Bert"><img alt="Bert" src="images/keyboard.jpg"/></a></li>
</ul>

What I am trying to achieve is these images positioned horizontally which I managed find but the ima开发者_Python百科ges had an underline style. I know that to fix it I need text-decoration:none somewhere, the css I tried was:

#members { list-style: none; text-decoration: none; float:left; display: inline; }
#members li { list-style: none; text-decoration: none; border: none; float:left; display: inline; margin: 0px 75px 20px 0px; }

If I change the second line of the above css to:

 #members li a img { list-style: none; text-decoration: none; border: none; float:left; display: inline; margin: 0px 75px 20px 0px; } 

Then the underline is removed but the images are then positioned vertically in a line instead of horizontally.

I know it's probably something really silly but I can't see what's causing it myself.

Thanks,

Martin

The underline is probably coming from the wrapping <a> tag, see if this works:

#members li a,
#members li a:visited
{ text-decoration: none; }

a img { outline: none; border: none; }

Try:

a,
a img {
    text-decoration: none;
    outline: none;
    border: 0px none transparent;
}

The above removes the underline, the outline and borders from the a and the descendant img, it doesn't declare the display property, so the float should still work, though if you float the images, you may need to declare overflow: hidden; on the parent a or li elements.

What worked for me in this same situation was adding this to the beginning of my css file:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

It will remove the underlines.

This solution came from a blog on W3 School.