How does my navigation and slider function in Internet Explorer 10?

Currently, I am in the process of developing my own website at www.heike-waltz.de

In the past, I relied on conditional comments for IE, but now that this is no longer an option for IE10, I am facing some issues that I'm not sure how to resolve.

While my navigation functions perfectly on all other browsers, IE seems to be causing some trouble. The bottom line seems to be misaligned by about 1px when hovered over, not sitting exactly on the black border line as intended.

Furthermore, my slider is not functioning as expected in IE. It is a javascript feature that I have integrated...

At this point, I am feeling a bit lost on how to proceed. Any suggestions or ideas would be greatly appreciated!

Thank you in advance.

Warm regards, Heike

cssinternet-explorer

Answer №1

Upon checking your website in Internet Explorer, I noticed a syntax error in the console which is pointing to the arrow function line. Arrow functions are not compatible with IE. To make it work in IE, you should convert it to ES5 syntax like this: 

pause = function pause() {
    clearInterval(myTimer);
};

resume = function resume() {
     clearInterval(myTimer);
     myTimer = setInterval(function () {
         plusSlides(slideIndex);
     }, 5000);
};

Additionally, you can utilize media queries to load specific CSS for IE. You may consider adding the following code snippet to adjust the position of the bottom line in IE:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*media query to detect IE*/ 
    #desktop-nav > ul > li > a {
        color: black;
        position: relative;
        width: auto;
        text-decoration: none;
        transition: color 0.5s linear;
        padding: 10px 0 11px 0;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .active-link a {
        color: #40c2c2 !important;
        text-decoration: none;
        border-bottom: 1px solid #40c2c2;
        padding: 10px 0 10px 0 !important;
    }
}

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

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

javascriptjqueryhtmlcss

Is there a way to show new chat messages instantly without needing to refresh the entire page?

Creating a real-time chat application presents the challenge of displaying new messages instantly without requiring a page reload. Exploring different methods like reloading only the chat message container or treating new messages as individual chatMessage ...

javascriptpythonhtmlcssdjango

Displaying Empty Boxes using Font Awesome

I was able to show Font Awesome properly before, but now it's not working even though I haven't made any changes. I've attempted various solutions but nothing seems to be fixing the issue. My goal is to display it as a placeholder. Below is ...

htmlcsstwitter-bootstrapfont-awesomebootstrap-4

What is the best way to eliminate the extra spacing on the right side of my navigation bar?

Hello everyone! I am diving into the world of HTML and CSS, but I've hit a roadblock. Despite searching through various resources and forums, I can't seem to find a solution to my problem. The issue at hand involves an irritating space in my nav ...

htmlcssnav

How come Font Awesome icons aren't appearing in my link?

Is my question strange? I've noticed a peculiar behavior when using fontawesome. Normally, it displays correctly, and I have already referred to the documentation, but none of the solutions I found here seem to solve my issue. Sources I have tried: ...

htmlcssfont-awesome-5

Modify the fixed div's class when the user scrolls past a certain section

My page includes a fixed menu with various sections, each assigned a specific class name using data attributes (e.g. data-menu="black"). I want the fixed menu to change its class based on the section that is currently underneath it as the user scrolls. Y ...

javascriptjqueryhtmlcss

Gradually blend the section of the picture with an image banner after 20 seconds

I have a background image that rotates every 20 seconds, fading in and out. The images consist of a logo at the top-left corner and a person image at the right side from top to bottom. However, I want only the person image to fade in and out while keeping ...

jqueryhtmlcssslideshowfade

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

csstwitter-bootstraptwitter-bootstrap-3css-frameworks

"Create a sleek design with CSS background stripes featuring 1px of white alternating with transparent sections

Despite reviewing numerous CSS background stripe tutorials, I have been unable to find a solution to my specific dilemma. How can I achieve a design with diagonal white lines that are only 1px wide alternating with transparent stripes that are approximatel ...

csscss-gradients

What is the best way to enlarge a column contained within a container, allowing an image to spread from the center of the column all the way to the right edge of the page?

I am trying to modify my image within a bootstrap container to extend it to the side while keeping the rest of the layout unchanged. Here is what I currently have: https://i.sstatic.net/Mcukl.jpg. There is a gap on the right side of the image that I want t ...

htmlcsstwitter-bootstrapbootstrap-4

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. https://i.sstatic.net/JGl1M.png The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): ...

csscss-hyphens

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

javascriptjqueryhtmlcss

A step-by-step guide on how to exclusively print items that have been selected using a checkbox in AngularJS

I have created two tables and added a checkbox for each one. Instead of default checkboxes, I have used images that change when clicked. Here is the code snippet: <button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !check ...

htmlcssangularjscheckbox

Create a sleek Bootstrap 4 webpage featuring a fixed footer and navigation bar. However, the challenge lies in ensuring that the content fills the

Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...

cssbootstrap-4

What is the best way to adjust the width of these elements for a perfect fit?

I'm currently working on a website where I have arranged squares in a grid layout. My goal is to make these squares perfect, with equal width and height. The only issue I'm encountering is that they tend to change between fitting two and three sq ...

javascriptcss

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...

javascriptcsswordpressswiper.jselementor

Generate a dynamic animation by combining two images using jQuery

My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code. This is the code I am using: $(document).ready(function() { $(".animar").click(function() { $("#img4" ...

javascriptjquerycsshtmlcss-animations

When you hover over the page, the content shifts to reveal a hidden div

Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...

javascriptjqueryhtmlcss

An innovative approach for converting CSS animations to flutter projects

During a recent collaboration with fellow designers, they shared some CSS animation examples from CodePen that needed to be integrated into our current project. The animations ranged from simple to complex, like the following: * { margin: 0; padding ...

cssflutterflutter-animationcodepen