Issue with Wordpress css rendering on Internet Explorer

My webpage is functioning well in Chrome and Firefox, but I'm facing compatibility issues with Internet Explorer.

I've identified several bugs related to tables and layout, however, I'm struggling to resolve the font and text-transform problems.

Can anyone offer assistance? For example, I need the menu entries on the top left to display in uppercase in IE as well. The CSS code for this entry is:

.menu-item:not(.menu-item-77)  {
    color: white;   
    text-transform: uppercase;
        font-weight:normal;
        margin-bottom: 4px;
        border-bottom: 1px solid white;    
        text-decoration: none;  
}

I am using WordPress with the Constructor theme.

csswordpressinternet-explorer

Answer №1

The :not pseudo-class is not compatible with IE8. You can refer to http://caniuse.com/#search=:not for browser support. Internet Explorer 9 and above do support this advanced selector.

If you need to support IE8, it's recommended to first provide your basic styles:

.menu-item {
    color: #FFF
}

Followed by your specific styles:

.menu-item-77 {
    color: #CCC
}

Check out the Fiddle: http://jsfiddle.net/jonathansampson/w39a7/

Answer №2

:not cannot be used in IE8 due to compatibility issues. For more information, you can check out this link:

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 displaying and concealing columns in Blazor QuickGrid based on breakpoints

I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding Class="d-sm-none d-md-block" to the QuickGrid component's PropertyColumn, it seems that the Bootstra ...

cssblazorquickgrid

Is there a way to properly align unordered lists (such as a navigation menu) within a div with a width set at

UPDATE: I found a creative solution to my issue. By adding margin-left and margin-right set to auto, along with fixing the width of the nav menu to 1002px and setting its positioning to relative, I was able to achieve the desired effect. Additionally, I cr ...

htmlcsslisthtml-listsunordered

What steps should be taken to address IE6 problems when a website functions properly in other browsers?

If you come across a website that functions perfectly on all browsers except for IE6, where the layout is extremely distorted but rebuilding the entire markup is not an option. Furthermore, only CSS selectors supported by IE6 are being utilized on the sit ...

cssxhtmlinternet-explorer-6cross-browser

updating the HTML DOM elements using JavaScript is not yielding any response

One way that I am trying to change the background of a div is by using a function. Below is an example of the html code I am working with: $scope.Background = 'img/seg5en.png'; document.getElementById("Bstyle").style.background = "url("+$scope.B ...

javascripthtmlcssangularjsionic-framework

JavaScript can be used to deactivate the onclick attribute

Is there a way to deactivate one onclick event once the other has been activated? Both divs are initially hidden in the CSS. I'm new to programming, so any help is appreciated. Markup <a id="leftbutton" href="#" onclick="showDiv(this.id); return ...

javascriptcsshtmlonclick

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

javascriptjqueryhtmlcss

Using different CSS classes interchangeably in AngularJS

Imagine you have a list with an unknown number of items, ranging from one to potentially dozens. You want to display five CSS classes in a regular alternating pattern. What would be the most effective approach to achieve this? Here is some sample HTML cod ...

javascriptcssangularjsng-class

Effortlessly include personalized order shipping details in WooCommerce with custom item meta data

Is there a way to automatically add or update meta on the order shipping method when an order is placed or when someone manually adds or edits order items? $shippingMethodItem->update_meta_data('num_packages', 0); I have tried using this code ...

phpwordpresswoocommercehook-woocommerceorders

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

javascriptcssreactjsmaterial-uigrid

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...

cssreactjsantdstyled-componentsant-design-pro

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Looking to display or conceal several divs according to the option selected from a dropdown menu?

I've been searching for a solution to my simple dropdown issue, but haven't had any luck in the forums. This is the code for the dropdown: <select id ="category_faq"> <option value="1">item1</option> <option value= ...

javascriptjqueryhtmlcss

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

javascriptjqueryhtmlcss

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

csswordpressinternet-explorer

Tips for assigning a class to an Angular accordion header when the panel is in the open state

I am currently utilizing the Angular UI Bootstrap accordion feature, which can be found here. <div ng-controller="AccordionDemoCtrl"> <div accordion close-others="oneAtATime"> <div accordion-group heading ...

jquerycssangularjstwitter-bootstrap

Having trouble with Firefox not recognizing the linear gradient color in my CSS3 code

I'm working on implementing a linear gradient background using CSS, but I'm facing an issue with Firefox not displaying it correctly. body { height: 100%; /*background-color: #F0F0F0;*/ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ ...

cssfirefox

Is your WordPress site struggling with redirection issues?

Below is the code I am currently using for redirection in my WordPress website: $currentPage = explode('?', $_SERVER ['REQUEST_URI']); $current_page_url = $currentPage[0]; if($current_page_url == '/e-commerce') { ...

phpwordpresshttp-redirect

Storing PHP usernames in AngularJS

Currently in the process of developing a dynamic AngularJS survey form that pulls the user's username from a WordPress setup. I've successfully retrieved the username, but encountered an issue where it disappears upon changing views and refreshi ...

phpangularjswordpress

The qTip comment box vanishes when focused on by IE/Edge browsers using touch devices

A unique JavaScript library called qTip is being utilized in my project. The application includes a StarRating and Comments feature, both of which are enabled by this plugin. After selecting a rating using the stars, users have the option to add comments, ...

javascriptjqueryinternet-explorermicrosoft-edgeqtip2