Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website:

Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn't include the CSS3 reset for standard browsers. However, the fix doesn't appear to be working as expected, all I'm seeing is the text and it's wrapping around strangely.

You can view working examples here:

The example I set up can be found here:

Any insights into why mine isn't working? The main differences I noticed are that he's using lists and has his a tags set as blocks. I tried implementing this but it's causing layout issues for me.

css pseudo-class

Answer №1

My theory is that the issue arises from the insertion and styling of an element (specifically, the <span class="overlay">) between the container and image. This could be causing a disruption in positioning when viewed in IE8. To demonstrate this, I have created a basic jsfiddle example that functions correctly in Chrome and IE8, based on the initial scenario. Unfortunately, I lack access to IE9 or newer versions for verification.

The main complication encountered was related to the width of the :hover overlay element being excessive. To address this, I applied left:0;right:0 within the respective class. While this modification may not align precisely with your preferences, my intention is that it provides some assistance regardless :-)

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

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascript css reactjs semantic-ui

Change an ASP page into an image format such as JPEG or PNG

Seeking assistance to convert my classic ASP page containing label controls styled with positioning to images in JPG or PNG format, and then send them using CDO. Using Dreamweaver for this task. Any help would be greatly appreciated. ...

css image asp-classic dreamweaver

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

javascript css reactjs react-native styled-components

Swapping mouse cursor using JavaScript

Currently, I am working on a painting application in JavaScript that utilizes the Canvas Object. I would like to customize the mouse cursor when it hovers over the Canvas object. Can anyone advise me on how to accomplish this? ...

javascript css mouse-cursor

I'm looking for a way to have an element shift in a particular direction only when two keys are pressed simultaneously

Having trouble moving a square diagonally when two keys are pressed simultaneously. Trying to create an if statement that detects both key presses at the same time and triggers the movement. However, all attempts have failed so far, leaving uncertainty abo ...

javascript css

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...

jquery html css

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

html css hover

When you hover over a Wordpress page, the entire text on the page will be underlined

Currently designing my own website using WordPress with the Elementor free plugin and Phlox theme. I've made some progress by completing a few sections which include text, buttons, and images. However, I'm encountering an issue where all the text ...

css wordpress-theming

What methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascript html css

Unable to select the initial element

Having trouble targeting the first child in this code snippet. I've tried various methods but nothing seems to be working. Any suggestions on how to resolve this? <div id="main"> <div class="page"> <p>random 1</p> </div ...

jquery html css addclass children

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. While I have successfully created the list of i ...

html css flexbox

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

javascript html css

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascript jquery html css

Issue with tile size or alignment in Safari

Recently, while creating my portfolio on CodePen, everything was running smoothly except for one little hiccup - Safari. http://codepen.io/tpalmer75/pen/FijEh (SASS for just one .item element) .item width: calc(100% / 3) display: inline-block height ...

jquery html css safari masonry

using outlines for FontAwesome icons in React Native

I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly. import IconFA from 'react-native-vector-icons/FontAwesome'; < ...

javascript css reactjs typescript react-native

Center-align the text vertically in relation to the icon

A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...

html twitter-bootstrap css

Web browser displaying vertical scroll bars centered on the page

I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...

html css

Changing the scroll ball's height using CSS

Can the scrollbar height be adjusted in this section? I've tried using overflow-y:auto, but it seems to start from the header and extend all the way to the bottom. When I scroll, the header moves along with it. Header needs fixing Scrollbar height a ...

html css scrollbar

Modify CSS image according to the user interface language in asp.net

Is there a way to dynamically change the image based on different cultures in my ASP.NET webpage? I have successfully been able to switch strings using a resource file, but I am unsure how to handle images. Currently, I have an A tag with a specific clas ...

javascript c#css asp.net localization

Formatting a pair of elements side by side in MUI Select

Currently, I am tackling the challenge of organizing elements in MUI Select v4. My goal is to display these elements in two columns rather than just one column within the dropdown. Despite attempting to override certain styles within MUI, I have not been ...

css material-ui

CSSer Q&A