The entire page is filled by the image link block

Question

The entire page is filled by the image link block

I created a primary div to serve as a container with a width set to 90%. At the top of this div, I have a title (image) with styling attributes such as height: 5em, display: block, and margin: auto.

In my HTML structure, it is organized like this:

<a href=""><img scr=""></a>

.

Interestingly, when clicking away to the left of the picture, the link remains clickable. This behavior has been observed in browsers such as Chrome, Safari, Firefox, IE, and Opera. The desired interaction was achieved only in IE and Opera where the link was activated only upon mouse directly over the image. Ideally, I would like this functionality to be consistent across all browsers. Thank you.

Edit: An example demonstrating the issue can be accessed at: http://jsfiddle.net/Bionicrm/dXaAF/.

html css image hyperlink block

Answer 1

Answer №1

http://jsfiddle.net/derekstory/K7Vwd/

To showcase a specific size of an image, you can wrap the entire content in a specified wrapper:

For instance:

HTML

<div id="wrap"> <a id="test" href="test.com">
        <div id="image">

        </div>
    </a>
</div>

CSS

body, html {
    height: 100%;
}
#test {
    height: 200px;
    width: 200px;
}
#image {
    background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg");
    height: 100%;
    width: 100%;
    background-size: 100%;
}
#wrap {
    width: 200px;
    height: 150px;
}

Answer 2

http://jsfiddle.net/derekstory/K7Vwd/

To showcase a specific size of an image, you can wrap the entire content in a specified wrapper:

For instance:

HTML

<div id="wrap"> <a id="test" href="test.com">
        <div id="image">

        </div>
    </a>
</div>

CSS

body, html {
    height: 100%;
}
#test {
    height: 200px;
    width: 200px;
}
#image {
    background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg");
    height: 100%;
    width: 100%;
    background-size: 100%;
}
#wrap {
    width: 200px;
    height: 150px;
}

Answer 3

Answer №2

Experiment with applying these specific styles to the provided link

display:flex;
width:50%;
height:10em; //adjust as needed
position:relative;
margin:auto;

Answer 4

Experiment with applying these specific styles to the provided link

display:flex;
width:50%;
height:10em; //adjust as needed
position:relative;
margin:auto;

The entire page is filled by the image link block

Answer №1

Answer №2

Similar questions

Struggling to make JQgrid 4.5.2 frozen columns function correctly - headers are the only part that seems to be moving

Issues with CodeIgniter Form Validation Implementation

What is the process for setting up both an open and closed status for my accordion?

The back button functionality in Android cannot be altered or overridden using JavaScript

Modifying the .textcontent attribute to showcase an image using JavaScript

When the tab on my website is clicked, the fontawesome icons elegantly transition into their designated positions

Using JSON and Ajax to dynamically append and generate a new Div element

Issues with CSS & HTML drop down feature on Blogger: Works flawlessly on all browsers except for Internet Explorer, where hover behavior is not functioning properly

Html.fromHtml does not strip

Modifying CSS files in real-time

How to review the current page in Joomla 2.5

Issue with the alignment of DIV container due to spacing issues

Avoid activating the hover state

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

Retrieve information from a JSON document

CSS - Divs failing to center using 'Auto: 0 Margin'

Eliminate the space between the input field and the button

List formatted in a table

Adjust the quantity by clicking or typing

Having trouble with implementing the .addclass function in a dice roller project