IMG link showing very strange behaviour, how to correct HTML?

I have a PNG image within <a href> </a> but for some reason when hovering the mouse over the image, the link is inaccessible.

I need someone to have a look at the page & tell me what's wrong with the code. See URL in following post.
TonyCaboneAsked:
Who is Participating?
 
remorinaCommented:
The problem is that your link is placed within a < p > tag which does not expand vertically to contain the link thus making it inacessible.

for instance if you edit the < p >tag containing the link and add style="overflow:hidden;", the element will expand and the link will be accessible but your text won't wrap around it.

The solution would be adding the link within the same paragraph tag next to it and float it to the right rather than a < p > of its own, try to replace the paragraph that comes after the link with the code below and remove the one with the link that you currently have.

<p>
<a href="/~lazybal2/files/Lazy_Ballerina-Weddings_and_Party_Hire.pdf" target="_blank" style="float: right;"><img border="0" align="right" alt="Download Lazy Ballerina's Wedding Guide" src="/~lazybal2/images/download-lazy-ballerina-wedding-guide-02.png" style="border: 0pt none; margin-left: 10px;" title="Download Lazy Ballerina's Wedding Guide"></a>
Lazy Ballerina is also available for <a href="http://www.lazyballerina.com/files/Lazy_Ballerina-Weddings_and_Party_Hire.pdf" target="_blank">private parties and weddings</a>. It is the perfect venue for those looking for great wine, a great garden and that unique something special.&nbsp;</p>

Open in new window

0
 
TonyCaboneAuthor Commented:
http://27.54.85.145/~lazybal2/index.php/cellar-door

note the hover action only works in small area below the image "Wedding Guide". Strange! Please help.
0
 
Brian GeeCommented:
Works fine in IE, but I do see what you're referring to in Firefox.

Been out of the Web game for a bit, but please see if you can remove the bolded below from the IMG tag to see if this makes a difference in Firefox.

style="float: right; border: 0pt none; margin-left: 10px; margin-right: 10px;"
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.

 
TonyCaboneAuthor Commented:
No, sorry same problem.
0
 
Dave BaldwinFixer of ProblemsCommented:
The <p> after it is covering it so you can't click on it except where it extends below it.
0
 
TonyCaboneAuthor Commented:
Thanks Experts!
0
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.

All Courses

From novice to tech pro — start learning today.