An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox.

Check out the demonstration here: http://jsfiddle.net/bHUs3/6/

I'm feeling frustrated. What could be causing this inconsistency?

Take a look at the screen below when hovering in Internet Explorer (no specific version) Edit I am now considering if my installation of IE is not as solid as I believed.

Answer №1

Perhaps the issue is attributed to the sudden shift in color of the text-shadow effect.

You may have noticed that when the button is not being hovered over, the letters appear slightly bolder. This could be due to the white letters having a white border that adds to the weight of the letter. This effect doesn't occur during the hover event because the letters change color.

To achieve a smoother effect, try adding +1px on the x-axis. http://jsfiddle.net/bHUs3/9/

If you wish to apply this change specifically for Internet Explorer, use a conditional comment:

<!--[if IE]>
.calltoActionReadMore {background-position:1px -24px}
<![endif]-->

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

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

Select value not updating as expected

I have a select box that is linked to a switch statement in PHP, which changes the order of the results returned from the database based on the value selected in the select box. However, I am facing an issue with my JavaScript not working correctly. Can an ...

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

Leveraging a PHP variable transmitted through an AJAX request

I have been on a quest for an answer but haven't found the right solution yet. Things seem to be running smoothly; the variable is successfully passed to my PHP file through AJAX, but I'm stuck on how to utilize it (specifically for the WHERE cl ...

Tips for efficiently organizing and maintaining a selection of JavaScript variables by easily adding and removing them as needed

I am currently developing items that will be shown on a webpage. I achieve this by utilizing the following code: var popup = "something..." Is there a method to keep track of all the created popup variables and control them efficiently using: adding a ...

"Is there a way to ensure that jPlayer plays the same song even after a page refresh

I have been working on integrating jPlayer with Ajax to ensure that when the page of my website is refreshed, jPlayer will continue playing its current song seamlessly. I have successfully stored track information and the current track during refresh, ho ...

Interacting with a Java String object using a JavaScript function

Currently, I am in the process of developing an Android application using Phonegap. My goal is to enable data sharing between my Java and JavaScript code. The user interface spans across different HTML and JavaScript pages, but there are specific strings t ...

Designing Tables for User Interfaces

In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...

I am experiencing difficulties in accessing the DOM

I have implemented jQuery $.ajax to dynamically load data into table rows as shown below: <table id='row-data'> <tr><td>1001</td></tr> <tr><td>1322</td></tr> <tr><td>15 ...

Having trouble with compiling SCSS code

While diving into the world of SCSS, I decided to compile my SCSS into CSS using npm. So I entered npm run compile: sass as defined in my package.json as follows: "scripts": { "compile:sass": "node-sass sass/main.scss css/style ...

Fade across animation

Is there a way to make the top_content function cross fade with #test and #test1 simultaneously? Currently, the divs #test and #test1 toggle but I want them to fade in and out together. $(document).ready(function () { $('#test, #test1').hide ...

retrieving the value added to an array

I used a script to populate an array with image sources: var imgs = document.getElementsByTagName("img"); var imgSrcs = []; for (var i = 0; i < imgs.length; i++) { imgSrcs.push(imgs[i].src); } However, when I try to output this in PHP, it display ...

Having trouble getting my image and text to align properly in two columns

<img id="story_image" src="images/builder_story_side.png" alt="photo"/> <div id="story_right"> <h2 class="story_header">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</h2> <p ...

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

What sets apart Selenium's mouseMove() function from the physical movement of a mouse?

Imagine I have element A and element B on a webpage. Using tools like Selenium or PhantomJS, I can manipulate the mouse via coordinates. By identifying the position of element A (a link) and element B (a submit button), I can create a bezier curve or mimi ...

Only the initial submission is allowed when submitting forms using jQuery $.ajax

Encountering an issue with submitting AJAX forms after following this particular tutorial. The forms are contained within div#upform and upon attempting to submit any of them using $.ajax, only the first one is being submitted. The code snippet in questio ...

How to properly format the <address> element on my website to display our company's contact information

While developing a website with asp.net mvc-5, it's important to include our company's contact details like telephone, email, and postal address. That's why I utilized the <address> tag within our "Contact US" page, replacing actual in ...

What is the best way to adjust a div's size according to the device's screen dimensions?

I'm in the process of developing a web app that will be used on iOS devices, specifically targeting both iPhone 4 and iPhone 5. During my development phase using an iPhone 5 device, everything seemed to fit perfectly and work seamlessly. However, when ...

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive ...