The anchor tag dwarfs the element it contains

I'm experiencing an issue on my website where the clickable area of my two images/buttons, labeled Get Started and Learn More, is larger than the actual image itself. I've wrapped the images with anchor tags to link to separate pages, but for some reason, the clickable area extends beyond the visual boundaries of the images. Can anyone offer assistance in resolving this problem?

HTML 

<!--button Holder-->
<div class="d-all m-all" id="buttonHolder">
    <div class="d4-d6 m-all" id="getStarted">
        <a href="contact.html#contactFormContainer"><img id="getStartedButton" src="images/get_started_button_vi.jpg" height="52"></a>
    </div>
    <div class="d7-d9 m-all" id="learnMore">
        <a href="services.html"><img id="learnMoreButton" src="images/learn_more__button_vi.jpg" height="52" ></a>
    </div>
   <div class="m-all d-all">
       <hr class="hrBreakTop"/>
   </div>
</div><!--End button holder-->

CSS

/*Buttons*/
#buttonHolder{

}
    #buttonHolder img{
        margin-top:155px;
        margin-bottom:10px;
        display:block;
        margin-left: auto;
        margin-right: auto;
    }

    /*Reduce button sizes on mobile*/
    @media all and (min-width:451px) and (max-width: 989px){
        #buttonHolder img{
            margin-top:65px;
            width:45%;
            display:block;
            margin-left: auto;
            margin-right: auto;
            height:auto;
        }

    } 
    /*Reduce padding top on mobile*/
    @media all and (min-width:0px) and (max-width: 450px){
        #buttonHolder img{
            margin-top:0px;
        }

    } 


    #getStarted{

    }
        #getStartedButton{
            margin-right:20px;
        }
        /*Add top margin to button to prevent merging with VoipInnovations middle logo*/
        @media all and (min-width: 0px) and (max-width: 989px){
            #getStartedButton{
                margin-top:15px;
            }
        } 

    #learnMore{

    }
        #learnMoreButton{
            margin-left:20px;
        }
htmlcss

Answer №1

To improve the appearance of the image, I found success by setting display:block. This change was necessary because of the space required for characters that drop below the line, such as "y".

Answer №2

The issue stems from the margins set on the images within the links. To resolve this, you should transfer the margins to the anchor tags instead.

#buttonHolder a {
display: block;
margin: 155px auto 10px;
width: 226px;
}

Additionally, remove any margins assigned to the images themselves.

#buttonHolder img {
display: block;
margin: 0;
}

Answer №3

To solve the issue, simply apply the float:left property to the image within the #buttonHolder element as shown below:

#buttonHolder img {
    float:left;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected results are occurring with the margin merging process

Struggling to create a layout for a website, here is the CSS and HTML I am using. Issue: 1. The header and navigation divs seem to be merging even without using margin 2. The merge is not happening between the navigation and left-nav/content divs Can an ...

htmlcss

Internet Explorer 10 considers content="IE=9" as the default standard for pages, yet it does not automatically apply them

I have a website built on ASP.NET 2.0. I am trying to make IE10 render all pages in compatibility mode IE9. I have added the following meta tag: <meta http-equiv="X-UA-Compatible" content="IE=9" /> However, when I open a page and check Developer T ...

htmlasp.netinternet-explorer-10

Dynamic header showing various sections of the image depending on screen size

Looking to create a responsive header image for my website using the 'mobile first' approach. I have a specific picture in mind that I want to display differently depending on the device's screen size, all while using the same image file. Fo ...

htmlcsstwitter-bootstrapfrontendbootstrap-4

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

javascripthtmljquerysqliteweb-sql

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

Enhanced Bootstrap Carousel with White Background Transitions

Having trouble articulating my issue, so here's a video that should clarify: https://example.com/video I'm using a bootstrap carousel template for a full-width slider. Despite my efforts to remove the white-space transitions, they persist. Am I ...

javascripthtmlcsstwitter-bootstrap

Discovering an <a> element with an href attribute containing two specified strings

Here's what I have: $("a[href*='string1' && 'string2']") Unfortunately, this code didn't work for me. I also attempted: $("a:contains('string1' && 'string2')") The second one only return ...

javascriptjqueryhtml

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

htmlcssangular

Dynamic jQuery backstretch feature: automatic image cycling and reversing

I am currently using backstretch on my website and attempting to create a continuous loop of the moving image by automatically shifting it from left to right and back. However, I am facing difficulties as the background only moves in one direction. I am se ...

javascriptjquerycssjquery-backstretch

Alignment of images at the center within a container div while maintaining a height of 100%

Apologies if this question has already been addressed - I have tried numerous methods to center images horizontally without success. This particular image just does not want to align in the center! For reference, here is the JSFiddle link HTML: (Please n ...

htmlcssimage

Adjustable text size to accommodate different cultural changes

My team is working on an MVC web application, with CSS stylesheets utilized in views. We are trying to achieve the following scenario: Whenever the language culture changes from English to another language, we want the font size of a specific class to ...

c#htmlcssfonts

Altering the backdrop upon hovering over an element

As a beginner in Javascript and Jquery, I am working on creating an interactive feature where hovering over one element changes the background image in another column. I have managed to write the function, but now I want to add an animation to the image tr ...

javascripthtmljquerycss

Issue encountered when assigning a CSS class to Angular component

My module contains a table structure with specific components. Here is the source code for table.component.html: <table border=1> <theader></theader> </table> The source code for theheader.component.html is as follows: <thea ...

htmlcssangular

One way to view inherited width while ensuring that data remains inside a pre tag is by utilizing CSS

Currently, I'm facing an issue with displaying PHP and Javascript code within pre tags in a project. The problem arises as the code spills outside the boundary of the containing element. While inspecting the console, I am attempting to identify the so ...

htmlcss

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey

Despite locating the button, Protractor still encounters difficulties when attempting to click on it

I've been having trouble clicking on a button using Protractor. The issue is that even though the driver can locate the element, it still won't click on it. Any assistance would be greatly appreciated. Thank you in advance. Here is the HTML for ...

javascripthtmlxpathselenium-webdriverprotractor

angular - apply custom background styles without resorting to disabling ViewEncapsulation

I can't seem to figure out why I'm struggling to set the background of my component correctly without having to use ViewEncapsulation.None. Currently, with ViewEncapsulation.None, my styles look like this: * { margin: 0; padding: 0; ...

cssangular

Console output shows that the function results in undefined

When I pass a string parameter to a function, I expect the console to display "reff", but it is showing "undefined" instead. Here is the code snippet: var _ref; function foo(_ref='reff') { var bar = _ref.bar; return console.log(bar); } foo ...

javascripthtmlfunctionconsole.log

Achieving a scrolling body with a fixed header in a Vue b-table

Currently, I have implemented a b-table element on a webpage to display data from a database. The table is paginated, but feedback suggests that users prefer all information displayed in a single scrolling view. However, the issue arises when I attempt to ...

htmlcssvue.jsvuejs2bootstrap-vue