jQuery class does not apply correctly in IE9

Currently, I'm designing a menu for a WordPress theme and facing a styling issue. I aim to differentiate between menu items with submenus and those without by applying different styles on hover. Here's the jQuery code snippet I am using:

$(document).ready(function(){
    $('.menu li').has('ul').addClass('submenu');
});

I've applied corresponding CSS styles where regular menu items display rounded borders on hover while submenu items only get upper rounded borders. This setup works flawlessly on Firefox, Chrome, and Safari but unfortunately not on IE9. Does anyone have suggestions on how to make this jQuery function compatible with IE9? Feel free to check out the progress of the WordPress theme here.

jquerycssmenudrop-down-menu

Answer №1

border-top-left-radius: 10px 10px 0 0;

This specific line is the issue. It should just be border-radius, as that encompasses all the necessary prefixes such as -moz- and -webkit-.

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

What is the best way to choose all elements that fall between two specific elements?

Looking to grab content situated between two specific elements within an HTML structure. The HTML snippet in question is as follows... <h2>This is firsty</h2> <p>Some para</p> <ul> <li>list items</li> <li&g ...

javascriptjquery

Retrieving Array keys from PHP using jQuery

As a beginner in jQuery, I am eager to learn how to retrieve Array keys from a php file using jQuery. Currently, I have jQuery code set up to send input to file.php and execute a query on every keyup event. When file.php echoes the result, it looks somet ...

phpjavascriptjquery

Adjusting the size and location of the current browser window using jQuery

Is there a way to modify the height, width, and position of the browser window using jQuery's document.ready() function? ...

javascriptjquerybrowserlocation

Sending Additional Information to the Script in jQuery UI Sortable

Currently, I have successfully sorted a table as shown below: var someVar = 'some var'; // AJAX function for sorting $('table#pages tbody').sortable({ items: "tr:not(.first)", update: function() { var i ...

jqueryjquery-ui-sortable

Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...

cssmobiletransformnext.jstransition

Is there a clash between jquery_ujs and Kaminari AJAX functionality in Rails 4?

After some investigation, it seems that there is a conflict between jquery_ujs and Kaminari's AJAX support in my Rails 4 application. Within my application.js file, I have included the following: //= require jquery //= require jquery_ujs //= require ...

javascriptjqueryruby-on-railsajaxkaminari

Deleting table rows after an object has been removed in AngularJSNote: Using

My AngularJS application retrieves a list of JSON objects and displays them in a table. Each row in the table includes a "Delete" button that triggers an ng-click method: <td><a ng-click="testButton()" class="btn btn-danger btn-mini">Delete&l ...

jqueryangularjs

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

Creating a custom Jquery easing function with an arrow that moves up and down

I am trying to implement Jquery easing with two arrows (an up arrow and a down arrow). It should look like there is a circle at the top of the box containing an up arrow and a down arrow. The idea is that when the box moves down, the up arrow appears, and ...

jquery

Can the same form be submitted with two different actions?

I am facing an issue with a form that is supposed to submit data to 2 different pages using the POST method. After trying some javascript code, I found that one form submission works correctly while the other does not. <form id="add"> <input ...

javascriptphpjquery

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

How do I hide a div if its contents exceed the available space in CSS?

On mobile screens, one of my divs is displaying below the navigation bar and I want to hide it using pure CSS. Can anyone suggest a solution? I've attempted using "text-overflow: hidden;" and "overflow: hidden;" but they don't seem to be working ...

htmlcss

Updating comment content using Ajax

I am in the process of using Ajax to insert my comment content. However, I seem to be facing some issues with the comment_add.php page. I was hoping someone could review it for me. While I have successfully obtained the streamid as checked in firebug, no ...

phpjavascriptjqueryhtmlajax

The footer menu fails to glide upwards

I designed a top menu for my website that includes 2 key features: Sticky navigation bar when scrolling Slide toggle navbar You can view the demo here: JSBIN However, I am facing 2 issues: When the page is at the top and the menu is in its default pos ...

jqueryhtmlcss

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup: const PulsatingCircle = styled("div")(({ theme, }) => ( ...

cssreactjsmaterial-uijss

How can you attach a d3 graphic to a table that was created automatically?

Calling all experts in d3, I require urgent assistance!! On this web page, a JSON is fetched from the server containing 50 different arrays of numbers and related data such as 90th percentiles, averages, etc. A table is dynamically created with the basic ...

javascriptjqueryhtmljsond3.js

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

javascripthtmlcssscrollbar

The float right attribute doesn't stay contained within the box; instead, it drifts outside the box

I've been struggling to keep this box fixed at the top of the browser, but I'm facing an issue with the positioning on the right side. I can't seem to figure out how to solve it, so I'm reaching out for some help. #StickyBar #RightSide ...

csshtml

Avoid the ability for individuals to interact with the icon embedded within a button

I'm currently working on a website where users need to interact with a button to delete an "Infraction." The button has a basic bootstrap style and includes an icon for the delete action. <button referencedInfraction="<%= i.infractionID %>" ...

javascripthtmljquerytwitter-bootstrap

Separating JQuery toggles for a unique user experience

Looking for a way to toggle my contents under separate list items without assigning each content a separate class or id. What's the best method to implement this in a generic way? Check out this demo for an example. ...

jquerytoggle