The CSS box-shadow property failed to render properly on Internet Explorer and Safari browsers

#keyboard {
position: fixed;
background: #eee;
display: none;
border: 1px solid #ccc;
border-radius:7px;
width: 950px;
height: 300px;
padding: 5px;
cursor: move;
background-image:url('BackgroundImage.jpg');
box-shadow: -5px -5px 5px 5px #888; 
-moz-border-radius: -5px -5px 5px 5px #888;
-webkit-border-radius: -5px -5px 5px 5px #888;

}

While the CSS code works fine in Firefox, there seems to be an issue displaying the shadow in IE8, IE6 and Safari.

box-shadow: -5px -5px 5px 5px #888;

I am currently seeking a solution for this problem. Your help will be much appreciated.

htmlcssinternet-explorerfirefoxsafari

Answer №1

When catering to Internet Explorer users and aiming for a box-shadow effect, I tend to utilize proprietary MS filters in my CSS. Take a look at this snippet from my stylesheet:

-moz-box-shadow: 2px 4px 19px #333333;
-webkit-box-shadow: 2px 4px 19px #333333;
box-shadow: 2px 4px 19px #333333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333');

While the effect may vary on IE, tweaking the parameters can bring you closer (or at least satisfactory) to your desired outcome across all browsers.

Answer №2

Although box shadow is a CSS3 property and not supported in IE8 and older browsers, it is still possible to achieve this effect using the CSS3Pie script.

Answer №3

I highly recommend checking out prefixr.com as well - it has been a lifesaver for ensuring my CSS3 is compatible across different browsers!

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

The latest bug fix and update in Bootstrap 4.5.2 now includes an updated version of Popper.js. Make sure to use the

Hello fellow developers, I am currently working with npm bootstrap version 4.5.2 and above. However, I am facing an issue with the compatibility of @popperjs/core. If anyone can assist me in resolving the bootstrap.js error temporarily, specifically re ...

javascriptcssnode.jspopperjs

Troubleshooting Bootstrap 4 problem with varying sizes of div content

I have encountered a problem with the script below, where the content in a div is of variable size and does not always occupy the entire horizontal space allotted by the col-6 class from one row to the next: <div class="card-body " > <div c ...

htmlcssbootstrap-4

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Blackberry Browser 4.2 experiencing spacing troubles

Seeking advice for developing a web application specifically for the Blackberry Browser 4.2. Looking to add vertical spacing between a series of links, but struggling due to lack of support for padding and margin in this version. Have tried using height an ...

htmlbrowserblackberrylayoutrim-4.2

What is the reason that the CSS3 property name 'filter' is not recognized in Windows 8 applications?

I'm in the process of adapting my own codepen for a Windows 8 desktop app. Everything runs smoothly on Codepen, with the exception of some CSS adjustments from -webkit- to -ms-. However, I encountered an issue regarding this specific line in the CSS s ...

htmlcssvisual-studio-2012svgwindows-8

Analyzing the string's worth against the user's input

I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...

javascripthtmlcss

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Displaying variables in JavaScript HTML

<script type ="text/javascript"> var current = 0; </script> <h3 style={{marginTop: '10', textAlign: 'center'}}><b>Current Status: <script type="text/javascript">document.write(cur ...

javascripthtml

Mobile view div failing to fill remaining space

When viewing my website on a mobile device, the heading in the div tag is not occupying the remaining space like it does on desktop. The heading is an h4 tag inside a div tag for mobile view. If you want to check out my website in inspect mode, here is the ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to make a div adjust to the width of its content

Hello, this is my first time posting a question here. I have found many helpful Java answers in this community before, so I thought I'd give it a try. I did some research beforehand, but please let me know if I have duplicated a question or done anyth ...

css

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

Guidelines for incorporating JS in Framework7

I am developing an application using the framework7. I am facing a challenge where I need to execute some javascript in my page-content, but it is not running as expected. <div class="pages"> <div class="page close-panel" data-page="item"> ...

javascripthtmlhtml-framework-7

Uneven animation when scrolling upwards on Safari and FireFox

I've recently been working on a website where I included a scroll animation that moves an icon image upwards depending on the offset position of the content in the right container. Although the logic is functioning properly, I'm experiencing some ...

jqueryfirefoxsafariweb-frontend

Seeking out drag-and-drop capabilities using JQuery

My goal is to create a feature where users can drag and drop words from a list into input fields. I want the capability to do this multiple times with the same word, allowing it to be placed in different input fields. This functionality will essentially i ...

jqueryhtmlformsdrag-and-drop

How to incorporate JSON into a d3.js calendar display?

Learning d3 charts and javascript has been quite challenging for me. After researching a lot, I successfully populated the chart with CSV data. Now, my next goal is to populate the chart with json data. This is the code I'm using, which is inspired ...

javascriptjqueryhtmljsond3.js

Having trouble getting the Vue.js framework to function properly on a basic HTML page with a CDN implementation

I recently delved into learning vue.js and decided to focus on forms. However, when I tried to open the file using a live server or XAMPP, it didn't work as expected. It had worked fine before, but now I seem to be encountering some issues. Could anyo ...

javascripthtmlvue.js

Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...

htmlcssblocktilemosaic

Styled-components is not recognizing the prop `isActive` on a DOM element in React

In my code, I have an svg component that accepts props like so: import React from 'react'; export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg> ) ...

javascriptcssreactjsecmascript-6styled-components

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

javascripthtmlapache-flex