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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

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
TonyCaboneAuthor Commented:
No, sorry same problem.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

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
TonyCaboneAuthor Commented:
Thanks Experts!
0
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.