Box-Shadow malfunctioning on Mozilla Firefox

My CSS code is not displaying the shadow effect in Mozilla Firefox:

body {
    text-align: center;
    font-family: Sans-serif;
    background-image: url("d3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    box-shadow: 1px 1px 1px grey;
    -moz-filter: drop-shadow(1px 1px 1px grey);
    -webkit-filter: drop-shadow(1px 1px 1px grey);
}

In Chrome, all elements have a nice shadow effect in the body. I would like to achieve the same result in Mozilla. How can I make this work? Why is it that "moz" isn't functioning as expected?

Appreciate your help!

cssmozillashadowbox-shadow

Answer №1

Avoid using -moz-filter for box-shadow as it is not recommended. Check out the browser support for box-shadow, which is widely supported by modern browsers. Stick to using just box-shadow. However, be cautious about applying it to the body element.

The reason why it may not be working is due to the incorrect order of CSS prefixes. Remember to include prefixed CSS properties first and unprefixed ones last, as the order of declaration matters in CSS.

Answer №2

box-shadow and drop-shadow may seem similar at first glance, but they are actually quite different. While box-shadow is a CSS property used for creating shadow effects around an element, drop-shadow is a value of the filter property that applies a drop shadow effect to an element. You can find more information about box-shadow here and about filter here. Additionally, you can check browser support for the filter property on Can I Use, where it shows full support by Firefox without the need for prefixes.

To correctly apply a drop shadow using the filter property in your CSS code, you need to use the appropriate syntax and remove any references to box-shadow. Here's an example:

body {
    text-align: center;
    font-family: Sans-serif;
    background-image: url("d3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    filter: drop-shadow(1px 1px 1px grey);
    -webkit-filter: drop-shadow(1px 1px 1px grey);
}

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

Button for Bootstrap 4 with a stretched hexagonal shape

Is it possible to create Bootstrap 4 buttons with hexagonal left and right sides, as shown in the image below? https://i.sstatic.net/BkU2E.png I have tried implementing solutions from a similar question but styling them with Bootstrap 4's .btn class ...

htmlcsstwitter-bootstrapbootstrap-4css-shapes

What is the best way to manage the gradual disappearance of multiple divs belonging to the same class using jQuery?

I need help with a hover effect for 6 divs on a page. Each div has a layer on top that fades out on hover and fades back in on mouseleave. I currently have code for each individual div layer, but it's causing a stack overrun. How can I assign this fun ...

javascriptjquerycss

What sets apart auto, 0, and no z-index values?

Can you explain the distinctions between the following: z-index: auto z-index: 0 the absence of z-index In all scenarios mentioned, we have a container div that contains two inner divs, named div1 and div2, with respective z-index values of 9 and 10. T ...

htmlcssz-index

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

javascriptjqueryhtmlcssparse-platform

Display a distinct button on the webpage if the logged-in user has not clicked on it yet

Seeking a solution to emphasize buttons that the User has not visited in the event of changes to the content of the views that appear when these buttons are clicked. The answer must utilize the ASP.net MVC CSS framework. <head> <style type="text/ ...

javascripthtmlcssasp.netasp.net-mvc

How to centrally align the navbar-brand when the navbar is collapsed in Bootstrap 5

Is there a way to align the navbar Brand in the center when the navbar is collapsed, while keeping it on the left or right side when the navbar expands in Bootstrap 5? ...

cssnavbarbootstrap-5

Excessive margin is preventing the navigation from being properly displayed

I am experiencing an issue with my sticky navigation bar that is enclosed in a div with 40px of margin on each side. The fixed navbar has a width of 100%, and while it correctly considers the parent's margin on the left side, it overflows on the right ...

htmlcss

Revolutionizing the Industry: Discover the Power of Dynamic Models, Stores, and Views for

As a newcomer to EXT JS, I am exploring the use of MVC in my projects. Consider a scenario where I have a web service with a flexible data model. I would like to dynamically create models, stores, and components based on the data from these stores. Let&a ...

javascriptjqueryhtmlcssextjs

Best practices for styling column headers in HTML tables

Developing a web application using Angular Material has been my ongoing project. I have created an md-list with 7 columns to display different values. My goal is to add a header to each column to identify its corresponding value. While I have the headers r ...

htmlcssangularjsangular-material

Learn how to utilize Javascript to easily drag and drop an image within the same block

I am encountering an issue with dragging and dropping images or swapping them using JavaScript. I have tried to implement this in the code below, where clicking on icons moves them onto a colored div. However, I am now trying to drag and drop the images wi ...

javascriptjqueryhtmlcss

"Struggling with getting the text color to change on hover in Tailwind

Today has been a frustrating day as I am diving into the world of tailwindcss and have been struggling with a particular issue. My code is below: <button className="bg-yellow-500 px-4 py-2 hover:text-black text-white"> Some Text Her ...

csscolorshovertailwind-css

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

White background with a black border and transparency on an Android device

I'm trying to create a shape that has a white background with a black border. <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shap ...

androidcssshapeslayer-list

Right-aligned button list using Bootstrap

Hello, I've got a Bootstrap list here: <h4><i class="fa fa-flag" aria-hidden="true"></i> 2</h4> <ul id="filter-version" class="filter multiple-select term-list"> <li data-id="3"> <a href= ...

htmltwitter-bootstraplistcss

What causes Google fonts to fail on Heroku but succeed when used locally?

I am currently using express and heroku to host a prototype of a landing page. While the webpage functions properly when running locally, I encounter font loading issues when accessing it on heroku most of the time... The CSS files are located under /pub ...

htmlcssexpressherokugoogle-font-api

Symbol for long division (using HTML and/or CSS)

Is there a way in HTML/CSS to display the traditional long division symbol? Something similar to what's shown here: . I found this Unicode character () that might work, but I'm concerned not everyone will have the necessary font installed on the ...

htmlcss

The custom checkbox feature is not appearing on Google Chrome browser

I need help creating a custom checkbox in HTML using CSS. It works fine in IE, but in Google Chrome, it's displaying the default checkbox instead of my custom one. What changes do I need to make for it to work in Chrome? HTML <link href="btn.css ...

htmlcssforms

The line-height property does not appear to have any effect when used within a table cell

I am struggling to format a table with fonts similar to the one shown in the image. I attempted to set the line-height for numbers to 33%, but so far, the line height has not been as expected. I have been unsuccessful in achieving the layout displayed belo ...

htmlcss

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Find the line containing the selected text within a JavaScript code

I am working on a contentEditable div where users can enter multi-line text. I need to be able to inspect the line that the user is currently typing in when they press enter. Is there a way to retrieve the context of that specific line (or all lines)? Is ...

javascripthtmlcsstextselection