Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11.

So far, I have attempted solutions from this StackOverflow thread.

For reference, here is a JSFiddle link that showcases the issue. CSS:

.addAccountPanel
{
    width:250px; 
    height:200px; 
    margin:auto; 
    background-color: rgba(0,0,0, .2); 
    position:relative; 
    box-shadow: 0px 0px 4px #004C7E;
}

HTML:

<div class="addAccountPanel"></div>
htmlcssinternet-explorer

Answer №1

If you want to make the shadow in box-shadow more visible, there is a fourth parameter available for increasing its size.

.addAccountPanel
    {
        width:250px; 
        height:200px; 
        margin:auto; 
        background-color: rgba(0,0,0, .2); 
        position:relative; 
        box-shadow: 0px 0px 4px 2px #004C7E;
    }

Check out this fiddle for more details!

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

What is the best way to include attributes in an HTML element?

I've been researching how to dynamically add attributes to an HTML tag using jQuery. Consider the following initial HTML code: <input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: lin ...

javascriptjqueryhtml

Issue with template updating when utilizing ui-router and ion-tabs in Ionic framework

CODE http://codepen.io/hawkphil/pen/LEBNVB I have set up two pages (link1 and link2) accessible from a side menu. Each page contains 2 tabs: link1: tab 1.1 and tab 1.2 link2: tab 2.1 and tab 2.2 To organize the tabs, I am utilizing ion-tabs for each p ...

javascripthtmlangularjsangular-ui-routerionic-framework

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

javascripthtml

A new module is unable to load Angular Material

Recently, I developed an Angular material module similar to a core module. import { NgModule} from '@angular import {MatCheckboxModule} from '@angular/material/checkbox'; @NgModule({ imports: [ MatCheckboxModule ], exports: [ ...

javascripthtmlangularangular-material

Challenges with the Placement of Buttons

I am facing an issue with the code below: document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenConten ...

javascripthtmljquerycss

Steps to turn off Bootstrap's fixed navigation on mobile devices

When a user visits the mobile version of the website or scales the webpage, the Bootstrap navbar will no longer remain fixed at the top. I am looking to set it as a normally scrolling view in the navbar. The Bootstrap class is "navbar-fixed-top" Click he ...

htmlcsstwitter-bootstrap

Click on the nearest Details element to reveal its content

Is there a way to create a button that can open the nearest details element (located above the button) without relying on an ID? I've experimented with different versions of the code below and scoured through various discussions, but I haven't be ...

javascripthtmljquery

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...

cssreactjsmaterial-ui

The Failure of window.pushState in HTML 5 History

Looking to implement ajax loading for updating center content and URL without refreshing the page. Everything seems to be working fine except for the history management. It appears that window.pushState is not properly recording URLs or the popstate even ...

javascriptjsonhtmljquerybrowser-history

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Everything looks perfect when I test my site on local host, but once I push it to my GitHub repo, only the HTML appears with no CSS or JavaScript. I've attempted changing my URL in the config.yml file to https://chanvrequebec.com and modifying href="/ ...

htmlcssgithubjekyllgithub-pages

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

What is the best way to extract multiple children from a shared tag using BeautifulSoup?

My current project involves using BeautifulSoup to scrape thesaurus.com for quick access to synonyms of specific words. However, I've run into an issue where the synonyms are listed with different ids and classes for each word. My workaround is to tar ...

pythonhtmlweb-scrapingbeautifulsoup

The Dropdown Button Functions Once and Then Stops

I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...

javascriptjqueryhtmlcss

EJS unable to display template content

I am having an issue with rendering a template that contains the following code block: <% if(type === 'Not Within Specifications'){ %> <% if(Length !== undefined) { %><h5>Length: <%= Length %> </h5> <% ...

javascripthtmlejs

In Python 2.7, we can utilize scraping techniques along with the 're' library to extract float numbers from a given string. By using the '

I just scraped this content import re import urllib from BeautifulSoup import BeautifulSoup After scraping, I have results like this (printed numbers_in_mill.text): 9.27[7] 9.25[8] 10.17[9] 10.72[10] How can I modify these results to get: 9. ...

pythonoutputscreen-scrapinghtml

Updating the jQuery mobile webpage

I have set up a small demo with two pages - the Home page and the Team 1 page. By clicking on the navigation menu, you can navigate to the Team 1 page from the Home page. However, if you are already on the Team 1 page and click on the Team 1 button again ...

javascriptjqueryhtmljquery-mobile

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

The material UI tabs text is missing the ellipses due to a coding error

As a newcomer to web development, I am experimenting with adding an ellipsis to the span element within the tabs. <div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;"> <div class="MuiTabs-flexContainer"> ...

cssreactjsmaterial-ui