Remove the underline from Hyperlinked Image

Question

It all started out with these two codes

            #Header .Logo   
                  {                
            background: url('http://s24.postimg.org/69nibdvz9/Header_P     .png') no-repeat 0px 0px;
            height: 186px;
            width: 100%;
            position:relative;
            top: 0px;
            margin: 0px 0px -5px;
            clear: both; 

and

             <div class="Logo"><center><img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px;" width="640" height="160" alt="{SourceTitle}" /></center>
            </div>

Basically I have a header and the logo of my website on top of it. Since I'm using a logo instead of a title I wanted the image to have a link. So I added:

             <div class="Logo"><center> <a href="http://oldtimesdaily.tumblr.com"><img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px;" width="640" height="160" alt="{SourceTitle}" /></a></center>
            </div>

Now the problem is the underline that has been created by the link is ugly. How do I remove it? I tried adding the "style="text-decoration:none;" both in .Logo and in the itself, but it made no difference. Any help?

Answer 1

You should probably add this line of css so that any images within a link do not show borders or underline.

.Logo a,.Logo a img{
border:none;
text-decoration:none;
}

Also as a side note, unless you have multiple logos you should probably use ID instead of CLASS as a best practice. You only use classes in css when there is the potential to have multiple elements needing the same styles.

Therefore making the code:

#Logo a, #Logo a img{
border:none;
text-decoration:none;
}

Answer 2

Try this:

a.Logo:link, a.Logo:visited {
    text-decoration: none
}

Answer 3

The anchor is putting a border around the image.

add the border property to the image style

<img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px; border: none;" width="640" height="160" alt="{SourceTitle}" />

Here is the fiddle

Answer 4

if you style your link with css the line should go away

a:link {color:#;}      /* unvisited link */
a:visited {color:#;}  /* visited link */
a:hover {color:#;}  /* mouse over link */
a:active {color:#;}  /* selected link */

http://www.w3schools.com/css/css_link.asp