"A Href" link causing an image to change size

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
kf7ays
Rank 0 - Newcomer
Posts: 2
Joined: Thu Dec 19, 2019 12:22 pm

"A Href" link causing an image to change size

Post 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.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

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

Post 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?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
kf7ays
Rank 0 - Newcomer
Posts: 2
Joined: Thu Dec 19, 2019 12:22 pm

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

Post 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.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

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

Post 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply