When the mouse hovers over the text inside a div, the link does not work in Internet Explorer

Question

When the mouse hovers over the text inside a div, the link does not work in Internet Explorer

Here is some code for demonstration. I'm facing an issue where the link spans over the entire div, which works perfectly in Firefox. However, in IE, when I hover over the text, the cursor changes to a text cursor and the link doesn't work there. I've tried adjusting the z-index but haven't had any luck. Any suggestions on how to fix this?

I want to populate my div with other divs that contain their own content,

but using a style="display: block"

is not suitable, and I'd prefer to avoid JavaScript like

onclick="location.href=

html css internet-explorer

Answer 1

Answer №1

If you're looking for a workaround, I have a solution that might help. While HTML5 allows <div> elements inside an <a> tag, HTML4.01 does not permit block elements within an anchor tag. One way to work around this limitation is by using fakediv. You can achieve this by using <span> elements inside the <a> tag and styling them to behave like <div>. Take a look at this example: http://jsfiddle.net/DzpjT/11/

HTML:

<body>
    <a href="http://www.google.com">
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
    </a>
</body>

CSS:

a{
    display: block;
    width:700px;
    height:500px;
    margin: 10px;
    background-color: lightblue;
    color: black;
    text-decoration: none;
}
span.fakediv{
    float:left;
    clear: both;
    display: block;
    margin: 10px 20px;
    cursor: pointer;
}

Answer 2

If you're looking for a workaround, I have a solution that might help. While HTML5 allows <div> elements inside an <a> tag, HTML4.01 does not permit block elements within an anchor tag. One way to work around this limitation is by using fakediv. You can achieve this by using <span> elements inside the <a> tag and styling them to behave like <div>. Take a look at this example: http://jsfiddle.net/DzpjT/11/

HTML:

<body>
    <a href="http://www.google.com">
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
    </a>
</body>

CSS:

a{
    display: block;
    width:700px;
    height:500px;
    margin: 10px;
    background-color: lightblue;
    color: black;
    text-decoration: none;
}
span.fakediv{
    float:left;
    clear: both;
    display: block;
    margin: 10px 20px;
    cursor: pointer;
}

Answer 3

Answer №2

Make the following changes to your code:

<a href="http://www.google.com/" style="display:block;position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 10;"></a>

This should resolve the issue. By adding display block to the anchor tag, it will now function similarly to a div element.

Answer 4

Make the following changes to your code:

<a href="http://www.google.com/" style="display:block;position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 10;"></a>

This should resolve the issue. By adding display block to the anchor tag, it will now function similarly to a div element.

Answer 5

Answer №3

As mentioned by brenjt, adding a height attribute to your css should solve the issue. While he offered some additional tips, in my opinion, it is the absence of an explicitly set height in your CSS that usually leads to this problem.

Answer 6

As mentioned by brenjt, adding a height attribute to your css should solve the issue. While he offered some additional tips, in my opinion, it is the absence of an explicitly set height in your CSS that usually leads to this problem.

Answer 7

Answer №4

Dealing with the same issue, I was reluctant to create unnecessary CSS classes for mimicking headings and paragraphs because the content already had these tags in place.

During my troubleshooting process, I decided to add a background color to my anchor tag. This experiment revealed that the tag was indeed covering the content above it in the DOM as intended. The entire section became clickable. Once I removed the background color, hovering over the text showed the cursor changing to an insert icon without registering clicks.

Since I already had a 1px transparent PNG on the page (used for fixing custom fonts in IE), I simply set this image as the background for the anchor tag.

This solution proved to be effective and resolved the issue.

Answer 8

Dealing with the same issue, I was reluctant to create unnecessary CSS classes for mimicking headings and paragraphs because the content already had these tags in place.

During my troubleshooting process, I decided to add a background color to my anchor tag. This experiment revealed that the tag was indeed covering the content above it in the DOM as intended. The entire section became clickable. Once I removed the background color, hovering over the text showed the cursor changing to an insert icon without registering clicks.

Since I already had a 1px transparent PNG on the page (used for fixing custom fonts in IE), I simply set this image as the background for the anchor tag.

This solution proved to be effective and resolved the issue.

When the mouse hovers over the text inside a div, the link does not work in Internet Explorer

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

SVG set to fill currentColor but does not dynamically change in high contrast mode

A step-by-step guide on serializing a model and sending it to an MVC controller through an Ajax

Tips for incorporating additional filter criteria into a jquery script

Using Javascript to extract a custom attribute from a button element

html pagination on website

What could be causing an unidentified term to be included in the Vue SCSS compilation process

Send a collection of list items from the client to a Spring MVC controller

The daterangepicker reigns supreme above all other elements

Tips for showcasing additional choices within a SELECT element while incorporating floating labels and adjusting the size

Struggling to properly align a div on top of an image

Windows and MacOS each use unique methods for displaying linear gradients

Are background images covering hidden text detrimental to accessibility?

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

Aligning with the parent element and adjusting slightly towards the left side

Using a variable to store the value of the id attribute in HTML code

Would you like to justify to the right?

access denied on image links

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

Adjusting the size of the snap increments

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and