Page 1 of 1

"A Href" link causing an image to change size

Posted: Thu Dec 19, 2019 12:27 pm
by kf7ays
I have this code currently and it displays the image perfectly:

<div class="image-button mt-2 mb-2"><img onmouseover="changee_image(this);" onmouseleave="changee_main(this);" src="../../images/frontpageimages/yellowbtn.png" alt="" data-src="../../images/frontpageimages/4f6ec0_327f7c30b9db4f4ab8049535ad84f6ac.jpg" /></div>

When I add the link to the code to make the image a clickable link (It's a button), it causes the image to get substantially smaller on the horizontal axis:

<div class="image-button mt-2 mb-2"><a href="index.php?option=com_content&amp;view=article&amp;id=16:the-shop-rig&amp;catid=11:blog" target="_blank"><img onmouseover="changee_image(this);" onmouseleave="changee_main(this);" src="../../images/frontpageimages/yellowbtn.png" alt="" data-src="../../images/frontpageimages/4f6ec0_327f7c30b9db4f4ab8049535ad84f6ac.jpg" /></a></div>

I have tried to add the link code outside the div, but it still behaves the same.

In 20+ years of building websites, I have never seen this happen. When you make an image clickable, it shouldn't alter the image display in any way.

Anyone have any thoughts on this?

Thanks in advance.

Re: "A Href" link causing an image to change size

Posted: Thu Dec 19, 2019 6:30 pm
by Albert Wiersch
Hello,

Probably something to do with a CSS rule for (or including) the "a" element? Have you checked for that possible issue?

Re: "A Href" link causing an image to change size

Posted: Fri Dec 20, 2019 8:56 am
by kf7ays
This is a Joomla site with a massive css file. My question is why doesn't it do this elsewhere on the site?

To my knowledge, there is no css code that limits the size of an "a" element on the site. But I could be wrong.

Re: "A Href" link causing an image to change size

Posted: Fri Dec 20, 2019 3:45 pm
by Albert Wiersch
kf7ays wrote:
Fri Dec 20, 2019 8:56 am
This is a Joomla site with a massive css file. My question is why doesn't it do this elsewhere on the site?

To my knowledge, there is no css code that limits the size of an "a" element on the site. But I could be wrong.
It could be specific to only affecting "a" elements that are children of a "div" tag with a class of one or more of these: image-button mt-2 mb-2.

I would try debugging in Chrome with the developer tools and see if it shows what CSS is affecting it.