Text above a link that is absolutely positioned on a webpage while using Internet

After creating a list of clickable boxes with text inside, an issue arose in IE where the text appears above the link, causing the link to become unresponsive when hovered over. Chrome and Firefox function correctly.

I am seeking a solution for this problem without relying on JavaScript or jQuery, while ensuring compatibility with IE8+.

Here is the jsfiddle.

HTML:

<!DOCTYPE html>
<html>

    <body>
        <ul class="container">
            <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                    tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                    dictum lacinia.</p>
              </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>CLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
        </ul>
    </body>

</html>

CSS:

.container {
    overflow: hidden;
    width: 1000px;
    list-style: none;
    margin: 15px;
    padding: 0;
}
.optionBox {
    float: left;
    overflow: hidden;
    width: 400px;
    height: 125px;
    cursor: pointer;
    margin: 0.3em;
    padding: 0.5em 0.5em 2em 0.5em;
    color: #555;
    background: transparent;
    border: solid 1px #DDD;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.reporting {
    position: absolute;
    background:url('http://s13.postimage.org/w73u674ur/icon.png') no-repeat;
    float: left;
    width:30px;
    height:30px;
}
a {
    position: absolute;
    width: 340px;
    height: 115px;
    font-size: 1.2em;
    padding-left: 3.8em;
    color: #08C;
    text-decoration: none;
}
a:hover{
    text-decoration:underline;
}
p {
    font-size: 1.2em;
    margin: 1.6em 0 0 3.8em;
}
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #333;
}
htmlcssinternet-exploreranchor

Answer №1

There appears to be a glitch in Internet Explorer related to anchor elements with absolute positioning.

To work around this issue, one common solution is to apply a background to the anchor. However, to prevent the link from obstructing the text below it, you can set a transparent background image instead. A common approach is to use an existing path as the background image.

For instance:

a {
    position:absolute;
    /* ... */
    background:url('about:blank');
}

Check out this jsFiddle demo for more insight.

Alternatively, you could also generate a genuinely transparent image and use that as the background instead.

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

Tips on creating Twitter Bootstrap tooltips with multiple lines:

I have been using the function below to generate text for Bootstrap's tooltip plugin. Why is it that multiline tooltips only work with <br> and not \n? I would prefer to avoid having any HTML in my links' title attributes. Current Sol ...

javascripthtmlcsstwitter-bootstrap

Creating a test harness for HTML JSON AJAX with a prettified display of syntax-highlighted JSON results

Having completed a JSON API, I am now looking to test it using a simple webpage that displays the JSON result in a prettified, syntax-highlighted format. To illustrate, let's consider the following example of a GET API call: http://www.google.com/ca ...

javascriptjqueryhtmljsonprettify

What steps should I take to ensure I receive a response after submitting a form to a designated API?

I developed an API that retrieves data and stores it in a MongoDB database. const userDB = require('./model/user') app.post ('/signup', function (req, res){ userDB.find({username: req.body.username}). then (result=>{ ...

javascripthtmlnode.js

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

javascriptjquerycss

Tips on modifying responsive design with jQuery

I have implemented a responsive design approach with the following CSS code: @media all and (max-width:799px){ .bigFont{ font-size: 28px; } } @media all and (min-width:800px){ .bigFont{ font-size: 48px; } } If I want to modify the font size using ...

jquerycss

Scroll left to erase using PhoneGap

After following a tutorial that resulted in creating a web app to store form input data locally, I attempted to create a native app using phonegap and Xcode. However, I am struggling to figure out how to implement a swipe to delete feature for individual ...

xcodehtmlcordovaswipephonegap-build

Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked: $('#cartHolder').attr('style','display: no ...

jquerycssdomcookies

In Internet Explorer, the Jquery Datatable within a Bootstrap d-flex container is exceeding its parent's boundaries

When using the d-flex class, Datatable renders outside or overflows from the parent element specifically in Internet Explorer. <div class="d-flex justify-content-center"> <div class="card"> <div class="card-header">HEADER< ...

jquerycsstwitter-bootstrapinternet-explorerdatatables

Improper layout on laptop screens with smaller dimensions

The design looks great on a 24-inch laptop, but on an 11-inch screen, the layout becomes distorted. The right column shifts down... Check out the layout here Below is my code: <div class="row" style="margin-left: 325px;"> <div class="span12 ...

htmlcsstwitter-bootstrap

"Transitioning from Bootstrap version 3.3.7 to the latest Bootstrap version 4.1.3

Everywhere I look, it says that Bootstrap 4.1 is compatible with Bootstrap 3, but when I update my project to the newer version, a lot of things stop working, such as this cookie consent feature. @{ Layout = ""; } @using Microsoft.AspNetCore.Http ...

cssbootstrap-4

Steps for preventing a button from being enabled until all mandatory fields are completed

Is it possible to have a button disabled until all required fields are filled out, with the button appearing grey in a disabled state and changing color when all fields are completed? I am facing an issue where clicking on the previous button is causing ...

javascripthtml

Tips for utilizing both noConflict and $ on one page

Can I use both noConflict and $ on the same page? <p>This is a paragraph.</p> <h1>hello</h1> <input type="button" id="=mybtn2" value="jq" onclick="myfun2();" /> <input type="button" id="mybtn" value="$" onclick="myfun(); ...

jqueryhtml

Tips for creating a form that adapts to different devices, ensuring it looks great no matter the screen size

<div class="modal" id="myModal" style="width:50%; top:15%;" role="dialog" > <div class=""> <!-- Modal content--> <div class="modal-content"> ...

cssmobilebootstrap-4responsive

The flexbox container is not displaying properly

I have rows containing two flex divs each. One div displays an image, while the other has text. I'm puzzled as to why some divs display correctly while others have overflowing text. Refreshing the page resolves this issue, but it resurfaces if I clea ...

cssbootstrap-4flexbox

Retrieving the chosen option from a Django dropdown menu

I am currently working on a dropdown menu where I need to capture the user's selection and return it to views.py. What is the best way to pass this selected element back to the backend? I want to maintain the same visual appearance, but I am open to ...

htmldjangodrop-down-menudjango-views

Creating a personalized webview in Appgyver Steroids: A step-by-step guide

I am planning to design the following layout: The main screen will display a web page There should be a sidebar on the left side The sidebar can be accessed by clicking on a 'hamburger' icon in the app header Currently, my app structure look ...

javascriptangularjshtmlsteroids

When the maximum width of an image within a flexbox is set, the aspect ratio may not be preserved

My goal is to use flex to easily center an img vertically inside a div, however, the behavior differs across various browsers. .flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: fle ...

cssflexbox

Creating a personalized scroll bar for an Angular Material Table while retaining the original table styles

Is there a way to maintain the table style of an Angular Material table while using a custom scrollbar with a transparent background? Currently, the issue arises when the scrollbar has an extended width, causing the table style to disappear. https://i.ss ...

htmlcssangularangular-materialscrollbar

What is the method to extract div text using Python and Selenium?

Is there a way to extract the text "950" from a div that does not have an ID or Class using Python Selenium? <div class="player-hover-box" style="display: none;"> <div class="ps-price-hover"> <div> ...

pythonhtmlseleniumweb-scraping

Achieve equal heights and vertical alignment for Bootstrap 4 accordion header with floated left and right divs

Building a Bootstrap 4 accordion, I encountered an issue. In the button header, I have two divs with one floating left and the other floating right. The right div contains an image, while the left div contains a title and a subtitle. Everything works perf ...

htmlcssbootstrap-4bootstrap-accordion