Image Hyperlink Question

I have an image that I'd like to use as a clickable link.

I have the code setup this way:

 <p><a href="https://itunes.apple.com/us/podcast/mypodcast" target="_blank"><img src="images/my-podcast-image-apple-itunes.png"></a></p>

Open in new window


When I view this in a browser, it shows an underline of the text of hyperlinks under the image (please see screenshot).

hyperlink-on-images.jpg
How the heck do I get this to remove the hyperlink line but still make the image clickable?

Thanks!
TessandoIT AdministratorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Juana VillaFront-end DeveloperCommented:
Hi,
Do you have a live url where I can take a look at it?

These are my assumptions without being able to inspect it:

1. The <a> is inheriting some styles so by overriding those styles it will be fixed. Example:

.downlodAppWrapper a:link,
.downlodAppWrapper a:hover,
.downlodAppWrapper a:focus,
.downlodAppWrapper a:visited{
     text-decoration: none
}

Open in new window



2. Make sure the image doesn't have that line
0
TessandoIT AdministratorAuthor Commented:
Thanks Juana - Sure do. Please check out the "Podcast" section of:

https://epk.henryschild.com

I put your suggestions into the CSS file and saved it (locally) and I do not see anything change.

Thanks!
0
Juana VillaFront-end DeveloperCommented:
Hi,
There are some styles on an <a> that have an orange color. So you can update it by:

#podCast a {
    color: transparent !important ; /*overrides the orange*/
    display: inline-block; /*makes the link be the same size as the image*/
}

Open in new window


Note: Every section as the same id (of "one"). Which is not the best practice. "ID" should be unique on your page. So, I recommend making them unique like:

<section id="music"></section> 
<section id="podCast"></section> 
<section id="biography"></section> 
<section id="gallery"></section> 
<section id="contact"></section> 

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

TessandoIT AdministratorAuthor Commented:
I've added your first bit of code to "main.css" on line 1715 and I've adjusted the sections to reflect your suggestions.

I also put that bit of code on line 13 of the index.html file (I have to admit that I'm not 100% sure where it goes).

I've invalidated the CloudFront cache so you should be seeing the latest page (from a fresh browser).

I am still seeing the image lines underneath it. Perhaps I'm putting this in the wrong place. Thanks for your help.
0
Juana VillaFront-end DeveloperCommented:
Good job on updating the id names! I am sorry if I was not very clear before. So, let's do this:


1. Remove the lines you added on 14-17 on your index.html (the section about "#podcast a"):
#podCast a {
    color: transparent !important ; /*overrides the orange*/
    display: inline-block; /*makes the link be the same size as the image*/
}

Open in new window


2. On your css add:
#podcast a {
    color: transparent !important;
    display: inline-block;
}

Open in new window



3. If you haven't. Please remove the css about my first comment:

.downlodAppWrapper a:link,
.downlodAppWrapper a:hover,
.downlodAppWrapper a:focus,
.downlodAppWrapper a:visited{
     text-decoration: none
}

Open in new window


bualá! it should look fine now :D
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TessandoIT AdministratorAuthor Commented:
This worked perfectly. Thank you, Juana for the quick and easy-to-understand solution. :-)
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.