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

Solve the issue with the horizontal scrollbar in Internet Explorer 7

The appearance of a horizontal scroll on this site in ie7 is quite puzzling. It functions perfectly in all other browsers, so I'm at a loss as to why this issue specifically arises in Internet Explorer 7. Any help in solving this problem would be grea ...

htmlcssinternet-explorer-7

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

My current version of Chrome browser (54.0.2840.59) is exhibiting a strange behavior when attempting to print preview an HTML page I have developed. The print preview truncates the page content, displaying less than what should be shown. The content is not ...

htmlcssprintingprint-preview

instructions for creating a hover effect where one div vanishes when hovering over another div

Is there a way to make the line visible when hovering over my circular div? #line { display: none } <div id='circle'> <div id= 'line'> ...

javascripthtmlcss

Issues persist with jQuery ajax request attempting to retrieve data from database

I attempted to retrieve data from my database using jQuery AJAX. Below is the code snippet I used: <script> $(document).ready(function(){ function fetch_data(){ $.ajax({ type:"POST", url:"http://localhost:88/phpPoint/select.php", success:function(re ...

javascriptphpjqueryajaxhtml

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

Trigger a click event on a div element that is nested within a form

Having trouble displaying an alert when clicking on a disabled button because the user needs to first click on a terms checkbox. Here's my jQuery code: $('#divButton').on("click", function() { if ($('#buybutton').prop('d ...

javascriptjqueryhtmlformsclick

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

cssresponsive-designsrcsetresponsive-images

Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Currently working on a one-page landing page using Squarespace and running into some issues with creating a slideshow. You can check out my website here (the slideshow is located at the bottom of the page): Squarespace provides default options for text p ...

jquerycsspositionslideshowsquarespace

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

javascripthtmlcss

Central AJAX spinner

I am having trouble centering the ajax loader. Currently, it is appearing in the right corner of the screen instead. Any help is appreciated. Below you can find the code snippet: div.amshopby-overlay { background-color: #fafafa; height: 100%; ...

css

Converting XML hierarchy into a flat HTML table using XSLT

Looking for a way to transform hierarchical XML into an HTML table? Here's the challenge: <node text="a" value="1"> <node text="gga" value="5"> <node text="dh" value="9"> <node text="tyfg" value="4"> < ...

htmlxmlxslt

Text hidden within the image, each line concealing a separate message

I am having an issue where my image is overlaying the text. I would like the text to wrap around the image and for any hidden text to appear on a different line. How can this be achieved? Here is the CSS code I am using: div.relative { position: relati ...

htmlcss

Tips for eliminating the white flash while transitioning background images with animation?

I am facing an issue with my code where the background image of the site transitions between 5 different images, but every time an animation completes and the next one starts, there's a white flash. I'm not sure how to resolve it or what I might ...

csshtmlcss-animations

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

As a newcomer to Javascript, I am seeking assistance with validating each field in the form below without having to click on the submit button. Your help is greatly appreciated! <form action="" id = "form1" class = "form-group row"> & ...

javascripthtmlbootstrap-4

Maintaining the initial value of a textbox in jQuery across various focusin events

Struggling to accurately explain the process, so feel free to check out this helpful fiddle. In my form, there are several text input fields and a single submit button. The submit button becomes enabled once any of the form fields have been altered. If a ...

javascriptjqueryhtmlcss

CSS - Dynamic triangle separator

I've been working on creating a triangle-shaped CSS divider. Using the code snippet below, I was able to achieve the desired result: border-width: 4vw 75vw 0 23vw; However, this method feels a bit unconventional. Since you can't use percentages ...

htmlcssdivider

Which design pattern should I implement to update all table rows except the initial one, while incorporating an AJAX insertion mode?

I am working with a table structure that is dynamic based on search results. The table consists of different rows including titles for categories like Organization, Category, and File. <table class="table-striped col-lg-12" id="results"> <tr& ...

c#htmlajaxasp.net-mvcrazor

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

assigning a CSS class to an input element based on a certain condition

My dilemma involves an input field for which I need to conditionally apply a CSS class. For instance, if firstName == undefined, I want to apply the CSS class ng-dirty. To achieve this, I attempted: <input required [(ngModel)]="customer.firstName" nam ...

cssangularjs

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss