Opacity property not functioning properly in Internet Explorer 8

There seems to be an issue with adjusting the background opacity.

style.css

.divOpacity1 {
     position: absolute;
     z-index: 1;
     height: 2000px;
     width: 100%;
     background-color: #FFFFFF;
     top: 2px;
     left: 0px;
     opacity: 0.6;
     -moz-opacity: 0.6;
     filter: alpha(opacity =60);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     display: none;
     }

While this code functions correctly in IE10 and IE11, it causes a white screen when viewed in IE8.

cssinternet-explorer-8

Answer №1

As per the information provided on quirksmode:

Note on IE compatibility

To ensure opacity works across all versions of Internet Explorer, the order should be:

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!        filter: alpha(opacity=50);// second!
   }

If this order is not followed, IE8 running as IE7 will not apply the opacity, while pure IE8 and IE7 will.

Therefore, it is recommended to adjust the order of your rule.

.divOpacity1 {
     position: absolute;
     z-index: 1;
     height: 2000px;
     width: 100%;
     background-color: #FFFFFF;
     top: 2px;
     left: 0px;
     opacity: 0.6;
     -moz-opacity: 0.6;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
     filter: alpha(opacity =60);
     display: none;
     }

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

I'm curious about the method used to create this body fadeIn effect

Recently, I stumbled upon the website "". I must say, it is truly remarkable. I can't help but wonder how the content on this page is cleverly faded in and slides up. This specific page caught my attention: ...

javascriptjquerycssanimationcss-animations

Strange floating elements wrapping inside Bootstrap 3 column divs

Essentially, I have a series of twitter-bootstrap square divs with classes like col-md-x, col-sm-x stacked together to form an image list. It's functioning smoothly for the most part. However, there are instances (which remain a mystery to me) where t ...

htmlcsstwitter-bootstrap

Safari displays text in a noticeably bigger font size compared to other browsers

I'm currently working on a website and have noticed that the fonts appear larger on Mac's Safari compared to other browsers. We are using the 'Open Sans' font from Google Fonts for our website. For example, here is a CSS snippet for ti ...

htmlcsssafari

What is the best way to compile an array of permissible values for a specific CSS property?

One interesting aspect of the CSS cursor property is its array of allowed values, ranging from url to grabbing. My goal is to compile all these values (excluding url) into an array in JavaScript. The real question is: how do I achieve this without hardco ...

javascriptcss

What is the process to modify the color of text that has been _selected_ within a `St.Entry` component in a Cinnamon Applet for the Gnome

I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...

cssgnome-shell-extensionsgjscluttercinnamon

Removing Delivery Address and Method From Checkout Page in OpenCart 2

Is there a way to remove "Step 2, Step 3: Billing Details" from the Checkout Page in OpenCart 2.0? I have searched for solutions online but haven't found one specifically for OpenCart 2.0. This is what I tried: <div class="panel panel-default" s ...

phpcssopencart

In what way could the border exceed the dimensions of the div?

<head> <meta charset="UTF-8"> <title>Document</title> <style> #Tri{ width:0px; height:0px; border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } </style&g ...

htmlcss

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

cssangularjsangular-ui-bootstrapbootstrap-modal

Creating an interactive timer that counts down in real-time using a combination of Django and JavaScript

When passing the date and time from views.py to my HTML page, I am encountering difficulties in utilizing that information to create a countdown timer using Javascript. For example: return render(request,'page.html',{'date':i.date,&apo ...

javascripthtmlcssdjangoweb

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml

Use CSS to center-align the content

While attempting to create a Google search replica, I encountered an issue wherein the contents ended up superimposed rather than arranged at the center. Is there a method to organize them in a dropwise format? <!DOCTYPE html> <html lang="e ...

htmlcssvertical-alignment

Adjusting the color scheme of a Checkbox Button in Bootstrap 4

Seeking advice on locating overrides for certain css properties. Take a look at this illustration on https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons. The contrast in color between the activated and deactivated states is n ...

csstwitter-bootstrapsassbootstrap-4

Designing numerous vertical lists in HTML

I need help with displaying multiple lists vertically using HTML For example: +--------+---------------------------------------------+--+ | Global | Region Country Currency Account Type Entity | | +--------+---------------------------------------------+ ...

htmlcss

I am facing an issue where the display property of inline-block is taking precedence over

I am facing a challenge in placing 2 containers side by side. These containers have a thick white border and are initially hidden until a click event reveals them. The containers are given a class of "hidden". However, in order to align the div containers ...

htmlcss

How can I display random images in the gallery?

I am looking for a gallery that is similar to the one in this provided link: The codes seem too complex for me to figure out on my own. Thank you ...

javascriptjquerycss

Hover over to reveal sliding menu

Hey everyone! Take a look at this code snippet: <body> <div id="slidemenubar"> <a href="">1</a> </div><br> <div id="slidemenubar2"> <a href="">2</a> </div> </body> When hovering over the ...

javascriptjqueryhtmlcss

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...

htmlcssbootstrap-4

Overlay with a progress bar that obscures visibility

I'm dealing with a progress bar that needs to be displayed on top of an overlay. If you take a look at this jsfiddle, you can see the issue. Here's the markup: <div class="overlay mouse-events-off"> <div class="progress progress-st ...

csstwitter-bootstrap

Issue with displaying modal and backdrop specifically on iPhone in Angular 13

Within our Angular 13 application, we have a modal component. The component's CSS includes the :host selector for the root element, which also serves as the style for the backdrop: :host { position: absolute; background: rgba(0, 0, 0, 0.5); widt ...

htmlcssangulariphonecross-browser

Chart: Observing the Discrepancy in the Initial X-Axis Points

I'm working on incorporating multiple charts onto one page, with each chart centered and stacked one after the other. I've set a fixed width for the graph canvas. The challenge arises from the varying ranges of tick values - one chart may have a ...

javascriptcssflot