Search code examples
htmlcsshyperlinkunderline

Remove the underline from Hyperlinked Image

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?

Solution

  • 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;
}