Display issues with CSS Absolute Positioning in IE11

I have encountered an issue with my html and css code that uses absolute positioning. While it functions correctly on Chrome and Firefox, I am facing a problem with Internet Explorer. The absolute position property in the SVG class does not seem to work in IE, causing the SVG image to be out of alignment.

Here is my HTML:

<div class="slider">
<i class='left-arrow'><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z'/></svg></i>
<i class='right-arrow'><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z' transform='translate(100, 100) rotate(180) '/></svg></i>
</div>

This is my CSS:

.slider i {position:absolute;top:40%;width:50px;height:50px;cursor:pointer;z-index: 4;margin:0;border:2px solid #fff;border-radius:100%;}
.slider > i:hover {background:#333133;border-color:#333133;transition: all .3s;}
.slider > i svg {position:absolute;fill:#fff;padding:20%;}

If anyone knows how to resolve this issue, I would greatly appreciate your help. Thank you!

Answer №1

To enhance user experience, it is recommended to detect if the browser is IE11 and make design modifications specifically for that browser.

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 for Creating an Upward-Dropping Dropdown Menu in HTML/JavaScript When Space is Limited on the Page

Hello, I am currently seeking a solution to adjust my dropdown menu so that it appears above instead of below when the page doesn't have enough space to display it fully. My tools for this project include HTML, Javascript, CSS, and JQuery exclusively. ...

Creating Visuals from Text with ReactJS/NextJS

Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...

Optimal method for arranging Vue components

When deciding where to position a child element, should it be done within its own CSS scope or from the parent? In the scenario provided below, would it be more effective to use margin-left: auto; on the parent element or the child element (both options a ...

The layout of Bootstrap 5.0 features an even number of columns in the ratio of 4-2

Is there a way to have an even number of columns (4, 2 or 1) in my bootstrap row without going through 3 when resizing the browser width? ... <div class="row row-cols-2"> <div class="col-sm"> ... </ ...

What is the best way to incorporate a unique box shadow onto my svg image?

While I've seen a similar question here: How to add box-shadow to a svg path circle shape, I am struggling to grasp how the transition from box shadow characteristics to SVG drop shadow characteristics was achieved. (Especially given that SVG Drop sha ...

What is the method to verify if a pop-up browser window has completed its loading process?

There is a link on my website that opens a new window. However, sometimes the new window takes so long to load. To prevent users from clicking on the link before the new window finishes loading, I want to disable it until then. I am aware that one way to ...

Having difficulties with my online form

Each page of my website features the following form: <section class="footer-one"> <form action="sendmail.php" method="post" onsubmit="return validateForm()"> <div> <div class="row half"> <div class="6u"> <input type="text ...

Modify the CSS selector for a dropdown menu element upon selection

I have customized a select box using CSS, but I am facing an issue where the custom arrow remains upward even after selecting an option. I want the arrow to point downwards once an option is chosen and revert to the default position when clicked outside. ...

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

How can I transform an HTML div into a video file like MP4 using Python and Django?

I'm looking to take a HTML page and target a specific <div> within it in order to convert it into video format. Purpose: I understand that HTML is typically static, but I have a requirement to transform it into a video. I'm seeking method ...

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

Within the configuration file conf.py for Sphinx, I have specified the following: html_css_files = ['css/custom.css'] html_js_files = ['js/custom.js'] However, any alterations made to custom.js or custom.css do not immediately appear i ...

Clear all events from an HTML element and its descendants with TypeScript

Each time the page loads, I have HTML from an API that is constantly changing. Is there a way to strip away all events attached to it? The original HTML looks like this: <div id="content"> <h2 onclick="alert('hi');">Test 1< ...

How to create space between elements in CSS without using margin or padding?

Recently, I stumbled upon a fascinating website while working on my own CSS grid project: I am curious to know how it was achieved. The Portfolio elements on the website have space between them without any visible margins or paddings that I could identify ...

Stop the button event from triggering

Although Sharepoint is available, I believe this question pertains more to javascript and cross browsing than Sharepoint. In my Sharepoint environment, I have a custom ribbon button that should trigger a workflow for a specific element in my library. I wo ...

Switch out one picture for another by hovering over it

Looking for a way to replace the holder-01-small.png image with one of the same dimensions on hover without altering the HTML code. Here is the code snippet: <div class="mix category-1"> <a href="img/holder-01-large.png" class="photo"> <i ...

Switching up the image using a dropdown selection menu

I am struggling with updating an image based on the selection made in a dropdown menu. I am quite new to javascript, so I believe there might be a simple issue that I am overlooking. Here is my attempt at doing this: JS: <script type="text/javascript" ...

How to implement bi-directional scroll animation in JavaScript for top and bottom movements

In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

XSLT: Tips for preventing the use of self-closing tags within HTML attributes

I am new to XSLT and I'm currently troubleshooting an issue with some XSLT code (version 2.0) that was written a few years ago. Here is a snippet of the XSLT code: <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" ...