Compatibility with IE8 - handling of CSS backgrounds and borders

While I have applied some CSS to a WordPress website, it appears correctly in Chrome and Safari but not in IE8.

The div has a background color and moz-border-radius for the border. The border is not of utmost importance, however, the background color only extends partially or not at all in IE8.

For example:

If you look at the newsletter signup form in the middle of the page, in Chrome it displays with a nice blue background and borders. But in IE, it just shows as a white background ignoring most of the styling.

Then if you visit:

The newsletter signup is on the right-hand sidebar. In IE8, the background only stretches halfway?

This issue is definitely related to CSS. I have tried various adjustments such as using fixed height, but so far without success :(

Any assistance would be greatly appreciated.

wordpresscss

Answer №1

The utilization of the <aside> element renders the markup invalid for Internet Explorer 8.

Answer №2

The issue arises when attempting to utilize html5 markup in older versions of Internet Explorer such as ie8 and ie7.

A solution to this problem is to incorporate into your project, as it includes an html5 shiv that enables compatibility with html5 tags in ie7 and ie8 browsers.

Answer №3

Finally, I was able to figure out the solution for this problem!

Please review your HTML code carefully.

<aside id="wpmlwidget-2" class="wpmlwidget">....</aside>

Make sure to replace the aside element with a div, as the aside code is not compatible with Internet Explorer 8.

<div id="wpmlwidget-2" class="wpmlwidget">....</div>

If you need to add border radius in IE 7 or IE 8, it can be done using JavaScript. You can find more information at 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

How can I prevent scrolling in a Vue mobile menu?

In this scenario, the toggle for the menu is controlled by a checkbox with the id "check" below. I attempted to bind v-bind:class="[{'antiscroll': checkboxValue}]" to the body in HTML, and also in the main App.vue file, but it did not work as exp ...

htmlcssvue.js

React: Modify the appearance of one component when hovering over another component

Currently, I am delving into the world of React and have come across a piece of code that successfully applies an opaque white overlay over an image when hovering over a button. This functionality is working as expected: class Product extends Component { ...

javascripthtmlcssreactjshover

How to centrally align a component in React (both horizontally and vertically)

I am currently implementing React with Bootstrap in my project. Here is the render function I have been working on, with the goal of center aligning the form. render() { return ( <div class="row"> <div className="col-md-3 ...

htmlcssreactjs

When scrolling, the bootstrap affix is anchored to the very left side

I'm struggling with keeping a fixed div on the right side of the screen within a container. Every time I try to scroll, it just moves all the way to the left. Any assistance is appreciated. http://jsfiddle.net/kbLak/ <link href="//netdna.bootstra ...

htmlcsstwitter-bootstrap

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

jquerycssaddclass

The hyperlink menu within the Bootstrap 4 navbar extends into the inline-form

Bootstrap 4's site suggests that a navbar with forms should function properly: I have used the class="form-inline" and at the same level in the HTML, the ul-tag with 3 hyperlinks. Check out this codepen example: http://codepen.io/anon/pen/eWOKXL?ed ...

htmlcssbootstrap-4twitter-bootstrap-4

Margin in Bootstrap Panel Not Set to 0 as Needed

My bootstrap panel's margins are set to 0, but it doesn't seem to actually be 0. In the image attached, the margin shows as "-", which I assume means 0. However, when I highlight it, I see a large block of orange. Does this indicate that the marg ...

htmlcsstwitter-bootstrappanel

Can I use 'div id' as the name for my array?

For a demonstration, please check out this jsfiddle: jsfiddle.net/rflfn/uS4jd/ Here is another attempt: jsfiddle.net/rflfn/T3ZT6/ I am utilizing SMOF to build a Wordpress theme. I need to create a function that changes certain values when a link is click ...

jquerycssarrayswordpressframeworks

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...

javascriptcss

Obtaining the current index in a list of strings using the map() function

Here is the code snippet I am working with: {words.map((word: string, index) => ( <Span key={index}> <Span> {word} </Span> </Span> ))} Currently, this code displays dif ...

javascripthtmlcssreactjs

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

JavaScript for Loading and Moving Ads in IE8

On my website at , I have placed my AdSense ads at the top of the page. However, I encountered an issue with Internet Explorer 8 where the Javascript code I used to move the ads to a different position on the page doesn't seem to work: <!-- POSI ...

javascripthtmlcssinternet-explorer-8

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

javascripthtmlcssreactjstwitter-bootstrap

Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided code. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

Unable to update PHP files of WordPress theme through browser editor or FTP

Last night, I was diligently working on my WordPress website using a custom theme that has served me well in the past. Everything was running smoothly until today when I encountered a baffling issue. My attempt to update the .php files in my theme (such a ...

phpwordpresspermissionsftpconnection-timeout

Is it possible to automatically collapse the Bootstrap navbar when the viewport is not wide enough?

Currently, my navbar is styled with a "shrinkwrap" background to match the width of the content: <nav class="navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrapbootstrap-5

Error Encountered: TemplateSyntaxError on the User Profile Page

I encountered an error: TemplateSyntaxError at /accounts/profile/ <ExtendsNode: extends "registration/accounts/base.html"> must be the first tag in the template The content of base.html is as follows: {% load staticfiles %} <htm ...

pythonhtmlcssdjangobootstrap-4

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Hey there! I'm currently working on adding some spinning text, similar to a carousel, using keyframes in my React app. The setup involves MUI v5 with @emotion. Basically, I want a "box" element to show different words every few seconds with a rotating ...

javascriptcssreactjsmaterial-uiemotion

Object vanishing beneath layers despite z-index: 4 (topmost layer)

Despite using z-index: 4 as the highest layer, the element keeps disappearing from the screen. I can confirm that it is correctly applied through the browser console. Any suggestions are appreciated. Please refer to the links below for images (I can' ...

htmlcss