It seems that the filter: opacity property is not functioning as expected in IE8. Despite having used it successfully before, I am currently facing issues with its implementation. Strangely enough, Firebug does not display the filter rule at all; only normal opacity is shown.
Does anyone have any insights or suggestions on how to resolve this?
ul.products-grid img:hover {
opacity: .8;
filter:alpha(opacity=80);
}
the style code is
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
give it a go
If using IE8, it is important to include the following code:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";For additional information on achieving cross-browser opacity, you can visit this resource
Give this a shot:
ul.products-grid img:hover {
opacity: .8; /* For modern browsers */
filter:alpha(opacity=80); /* For IE 7 and older versions */
/* The following lines are for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
If you aim to maintain validity on your page, ensure to separate your standard stylesheet from the IE version using an if IE statement as shown below:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="stylesheetname.css" />
<![endif]-->
Make sure to verify whether your webpage is displaying in quirks mode on Internet Explorer. It's possible that IE8 might not fully support the :hover pseudo class on random elements unless it's in standard compliance mode.
You can find a related scenario and explanation here.
Your CSS is functioning properly. You can view the demonstration here: http://jsfiddle.net/e26Pz/2/
The issue may lie with the DOC type. In the provided example, I utilized <!DOCTYPE html>
Which Doc type are you currently utilizing?
Complete demo code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
img:hover {
opacity: 0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn1/69651_408104205949356_2097957740_n.jpg" />
</body>
</html>
Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...
I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choi ...
I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...
My project consists of three main files - an HTML, a CSS, and a JS file. I have developed the HTML using the Bootstrap 5.1.3 framework. The issue I am facing pertains to the alignment of the clothing brand logo within the header section. Despite multiple ...
Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I&a ...
In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...
Is there a way to align a series of li items to the bottom of their parent, the ul, without using any unconventional methods? The challenge lies in the fact that these li items need to have a float: left property and vary in height and width. Below is my ...
Can you explain the functionality of this background image? You can find the website here: ...
Is there a way to enter square root and squared symbols into an input box using a calculator with buttons? When clicking a button, the value will be shown in the input box. For example, expressions like x²+x³ or 2√13 + 3√4. I'm primarily concern ...
I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...
I will provide detailed descriptions to help explain my issue. Link to CodePen: https://codepen.io/Yosharu/pen/morErw The problem I am facing is that my background (and some other CSS elements) are not loading properly in my code, resulting in a white bac ...
I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...
When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...
I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...
I have encountered a situation where I want to display a div (like a popup) when text is selected in a text area. However, when using mouse-down for this action, the position of the div sometimes does not align directly below the selected text. Below is t ...
When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...
My bootstrap carousel is displaying perfectly on desktop screens with images sized at 1200x400. However, when viewed on mobile devices, the images shrink so much that the text on them becomes unreadable. Additionally, the navigation dots at the bottom of t ...
Within the HTML code, there is a photo already added as an SVG file. I am interested in learning how to enable the user to select between two options - either a cross or a zero. Upon clicking on the designated area, the chosen figure should appear (resembl ...
I'm brand new to Material Ui and currently tackling the implementation of their SELECT component. However, I am running into an issue where it is displaying in a row instead of a column. Am I overlooking something important here? const SelectDropDownC ...
I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...