Placing a background image in a span element within an anchor tag

Trying to center a span element displaying an icon with background-image inside an anchor tag is causing issues with IE versions. Looking for any tricks or solutions from experienced developers.

You can view the correctly centered version in Firefox here: https://i.sstatic.net/o3i62.png

However, the incorrectly displayed version in IE can be seen here: https://i.sstatic.net/nDPno.png

Here is the HTML code being used:

<a href="#" class="show-more"><span class="show-more-arrrow"></span></a>

Along with the associated SCSS code:

.show-more{
        height: 15px;
        width: 100%;
        background: none repeat scroll 0 0 rgba(239, 239, 239, 1.0);
        text-align: center;
        padding-top: 2px;
        position: absolute;
        bottom: -12px;
    }
.show-more-arrrow {
        background-image: url(../images/arrow-submenu-large-hover.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 10px;
        position: absolute;
        width: 16px;
}

The computed width of the anchor tag is 863px and the span has a width of 16px.

htmlcssinternet-explorer

Answer №1

By utilizing position: absolute;, the span is treated as a block element, rendering position: absolute; redundant. Instead, consider using display: inline-block; to achieve your desired outcome. Hopefully, this suggestion proves useful to you.

Answer №2

In my personal experience, I have discovered this handy workaround to overcome the CSS rules that are ignored by both Internet Explorer and Chrome.
Below is the snippet of code:

.show-more:not(*:root){
    height: 15px;
    width: 100%;
    background: none repeat scroll 0 0 rgba(239, 239, 239, 1.0);
    text-align: center;
    padding-top: 2px;
    position: absolute;
    bottom: -12px;
}
.show-more-arrrow:not(*:root){ 
        background-image: url(../images/arrow-submenu-large-hover.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 10px;
        position: absolute;
        width: 16px;
}

Feel free to let me know if this solution proves helpful in your particular scenario as well.

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

jQuery slideToggle function not working properly when clicking on a link within a div

I am facing a slight issue with the slideToggle function when there is a link inside the slideup panel. My goal is to create a button that, when clicked, will slide up a div displaying related posts. Subsequently, when another button or project link is cli ...

javascriptjqueryhtmlcss

Revamp the div element to display several images upon hovering

I currently have a div containing several static images. <div class="logos"> <a href="#"><img src="img/logos/imgo.png"></a> <a href="#"><img src="img/logos/imgo1.png"></a> <a href="#"><img src="i ...

htmlcss

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...

javascripthtmlhttpfrontend

Hiding the +/- button in Vue.js based on specific conditions

Is there a way to hide the +/- button when there are no items below? Current Challenge Example Sandbox Link <template v-for="item in SevenLengthlist" :key="item"> <ul> <li><input type="checkbox" id ...

htmlcssvue.js

Changing HTML content dynamically using tabs within Angular 2 to create a stylish design

I'm working on developing a reusable angular2 component that can take an array of URLs linking to HTML files on my server. The goal is to generate a content window with tabs for switching between different "chapters", effectively swapping out the HTML ...

htmlcssangulartypescriptangular2-template

Fixed Sidebar Position Changes when Bootstrap Modal Closes

We are facing a peculiar issue in our React application involving a sidebar and a bootstrap modal. The problem arises when we click the "X" button in the modal, causing the sidebar to momentarily drop down the page before the modal closes. This strange be ...

cssreactjssassreact-bootstrap

Combining two strings to form a single variable using PHP

Currently, I have a registration form set up for users to register successfully into my database. However, I am looking to enhance this functionality by restricting registration to only users with specific domain addresses. After some research, I found tha ...

phphtmlmysql

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

cssangulartypescriptangular7ionic4

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

javascriptcssnode.jsexpresshttp

Enable the button when there is an error after submission in AngularJS

Has anyone encountered issues with dynamically disabling a button? I noticed that my API delays for 2 seconds to mimic a slow connection. I expected the submit button to be disabled upon submission and then re-enable itself. In HTML, manually disabling t ...

javascripthtmlajaxangularjs

Resetting form fields when clicking the "Next" button with the FormToWizard jQuery Plugin

I am in the process of developing a lengthy form using the jQuery plugin called formToWizard. Within one of the fieldsets located midway through the form, there are hidden fields that are displayed upon clicking a button. The strange issue I am encounterin ...

jqueryhtmlcss

Load data onto a webpage using Jquery or json without the need to refresh the page, seamlessly integrate it

After receiving data on an html/php page from the database, I often find myself needing to edit it. However, I wish for this data to update automatically without the need to refresh the page each time I make changes and click the submit button. I've c ...

htmljsontags

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Navigating through an array of images using ng-repeat

I am attempting to iterate through the image array and have each image correspond to a separate li. Despite using the variable "image" as my identifier, I am encountering difficulties looping through the array. The line that I am trying to modify is as fol ...

angularjshtml

Having trouble aligning items (3) in the center on top of other elements (3) using flexbox

Currently, I am working on developing a community blog/website called THPSBlog. Utilizing the FlexBox feature, I divided and designed a banner with three distinct sections. NEWS | MEDIA | COMMUNITY The banner consists of three i ...

htmlcss

Changing the MIME type from "application/octet-stream" to "video/mp4" in HTML5: A Step-by-Step Guide

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body> <video id="video" controls src="${maps.url }" height="598" width="782"> ...

htmljsp

Eliminate gaps between items when using the flex-wrap:wrap attribute

Check out my code on Plunker. Is there a way to eliminate the vertical spacing when using flex-wrap: wrap; #main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; } <div id="main"> < ...

htmlcssflexbox

Arranging a list of HTML elements based on their inner content text

I am faced with the task of sorting computer-generated text using JavaScript. To achieve this, I have duplicated the HTML markup in order to create a sorting function in JavaScript. The challenge lies in sorting an array of HTML objects based on their in ...

jqueryhtmlarrayssortingobject

What is the best way to embed sections of one HTML page into another page?

Is there a method I can use to embed sections of one webpage within another webpage? The dilemma arises from the fact that the second page has a distinct style compared to my main page. Is it feasible to apply the alternate style solely to specific content ...

javascriptphphtmlcss

The function view() is not displaying the CSS and JS files properly

Having trouble with loading the css and js on my view: This is how I set up the controller: return view('home.news') ->with("news", $news); And here's how the route is defined: Route::get('/news/{id}&apos ...

javascriptphphtmlcsslaravel