Positioning an anchor element over an image in Internet Explorer (IE)

Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property.

Currently working on a website with promo panels displayed within a UL. Each LI contains a promo image and one or more anchor elements positioned over different areas of it. Both the IMG and A elements are absolutely positioned in the LI element, resulting in a structure like UL > LI > IMG A A A.

While this setup functions smoothly in Firefox and Chrome, IE seems to have trouble with it. Attempted use of z-index has been unsuccessful in resolving the issue.

Seeking assistance in understanding the problem that IE faces and finding a better CSS solution. A simplified example of the issue has been created using a div, img, and a single anchor for demonstration purposes. Feel free to copy/paste the code onto your system for testing.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta name="Description" content="" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="" />
        <style type="text/css">
            #div {
                z-index:1;
                display: block;
                background:red;
                position:relative;
            }
            #image {
                z-index:2;
                position:absolute;
                top:0;
                left:0;
                display:block;
            }
            #anchor {
                z-index:3;
                display:block;
                overflow:hidden;
                position: absolute;
                top:0;
                left:0;
                text-indent:-9999px;
                width:640px;
                height:480px;
            }
        </style>
    </head>
    <body>
        <div id="div">
            <img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
            <a href="#" id="anchor">clicky</a>
        </div>
    </body>
</html>

Limited control over the UL > LI > IMG A layout is available. This setup allows for easy updating of images when new promos are introduced, as well as simple addition or removal of anchors based on the number of 'calls to action' the image requires. Inline injection is used for positioning the A elements.

Thank you!

Answer №1

Encountering the same issue led me to develop a solution based on your example:

<style type="text/css>
    #div {
        position:relative;
    }
    #anchor {
        display:block;
        width:640px;
        height:480px;
        overflow:hidden;
        text-indent:-9999px;
        position:absolute;
        top:0;
        left:0;
        background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
    }
</style>

<div id="div">
    <img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
    <a href="#" id="anchor">clicky</a>
</div>

By setting the anchor tag's background image to match the image it's positioned over, using positive pixel values larger than the anchor's dimensions and setting background-repeat to "no-repeat", the anchor tags function properly in Internet Explorer without downloading extra resources, saving bandwidth. No special styling is needed for the img tag, and the containing div only requires relative positioning.

To simplify the process, if you're not concerned about specifying background-position or controlling dynamically generated image sizes, consider using a small clear/transparent image (1x1) with appropriate background-repeat settings.

You can also explore Billy Moat's sample fiddle for further inspiration: http://jsfiddle.net/7NpLq/29/

Answer №3

The problem also impacts IE10, however, it does not occur in IE11. Instead of using a background image, you can try setting

background-color: rgba(0, 0, 0, 0);
on the anchor element as an alternative solution. Keep in mind that this workaround is not compatible with IE8 since it lacks support for rgba colors.

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

I am facing difficulties displaying Arabic language characters on my HTML code

I created a website and included the following meta tag in the head section: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> However, all Arabic text appears distorted as shown in the image. Interestingly, when I manually cha ...

Manage and modify data values

Currently, I am developing a weather forecast app and facing an issue with changing the temperature from Celsius to Fahrenheit upon hovering. Despite my attempts, the changes I make either do not reflect or completely erase the line. I am eager to learn ...

Tips for managing table scroll in a flexbox design

Check out the demo here I am working with a table that has an indefinite number of rows and columns. When the table has a small number of rows and columns, it adjusts its width according to the available page space minus the width of the sidebar. Everythi ...

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

Designing a unique layout using the Bootstrap grid system

Can someone help me achieve a responsive bootstrap grid layout as shown below? If screen size is equal to or greater than 576px: https://i.sstatic.net/v44dE.png If screen size is less than 576px: https://i.sstatic.net/mnPPp.png Thank you for your assist ...

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar. Instead of using the 'display: inline-block' property because it creates unwanted whit ...

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

Leveraging jQuery chosen for interactive form elements

This Table Row contains 5 input fields, with the first being a select box. I am utilizing the chosen jQuery plugin to enable search functionality for the select items. Since this is a dynamic form, I am duplicating these rows. However, I am facing an issu ...

What is the process of securing a directory with a password using Node.js and Express?

I am in the process of creating a basic web server using Node.js and Express. My aim is to host various static files, one of which includes a Unity WebGL game. In order for the game to function properly, numerous assets need to be loaded. I am interested ...

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

Unable to avoid IE8 warning about reposting using client-side code

When using asp.net webforms, every server control generates a post request when clicked. If you try to reload the page with F5 or Ctrl+R after that request, the browser will show a re-post warning by default. In an attempt to avoid this behavior in IE 7-* ...

The text is not rendering properly, with some characters being replaced by different ones

RESOLUTION: To fix the issue, eliminate font-family, font-size, and color properties from the parent div. UPDATE: The problem only occurs when I press CTRL + F5. UPDATE 2: After investigating, I found that the culprit is .site-footer with a position:abso ...

Aggregate the data entered into input fields on one page and display them on a separate page

Can you help me with this task? - I have 2 pages set up (page 1 has input fields & page 2 is where the entered data should be displayed) - I want to retrieve all the text input from the first field and insert it into the "content" tag on the second page. ...

Activate JavaScript functions by pressing the enter key, allowing for various searches, AJAX requests, and DataTable displays to occur seamlessly without the need to refresh

I recently developed a web page that integrates an AWS API interface to interact with an RDS Aurora MySQL Serverless database. Users can input a SQL statement and click the Query button, which triggers an AJAX request, returns JSON data, and converts the d ...

Blueprint CSS is causing a padding problem

This piece of code is perfectly styled with blueprintcss: <div class="container"> <div class="span-12" style="background-color : cyan"> Hello </div> <div class="span-12 last" style="background-color : green"> Bye </div& ...

Exploring the combination of PHP and HTML through conceptual sessions

I am a beginner in the world of PHP, HTML, and website development, and I am currently trying to grasp the concept of Sessions. My goal is to implement a login/logout feature on a website using sessions, MySQL, and Slim framework. I am struggling with und ...

Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...