All geek questions in one place

Mozilla bug? box-shadow: insertion is not working properly

Basically, the code below should be just a white page with a shadow around the edge. This works fine in Chrome, but I can't get it to work in Firefox!

<html> <head> <style type=text/css> body { background:#ffffff; font-family:arial; margin:auto; box-shadow:inset 0px 0px 100px #333333; -moz-box-shadow:inset 0px 0px 100px #333333; -webkit-box-shadow:inset 0px 0px 100px #333333; } </style> </head> <body> </body> </html>

Check out the page here:

http://pastehtml.com/view/bagevr6ke.html

Look at it in Chrome, then on Firefox, and tell me if you see the difference :)

Greetings

EDIT: So, the post below explains how to fix the above code, CSS reset worked, and also I learned about quirk mode and dotypes :)

However, the CSS page I am working on still suffers from this error no matter what I use reset. I am not currently using Doctype as I am not sure what I should deliver, or this will fix the error.

Here is the full site:

http://middle.dyndns-server.com/results.html

And the stylesheet:

 body { background:url('bg.png'); font-family:arial; margin:auto; box-shadow:inset 0px 0px 100px #333333; -moz-box-shadow: inset 0px 0px 100px #333333; -webkit-box-shadow:inset 0px 0px 100px #333333; } #footer { padding-bottom:10px; margin-top:30px; } #page { width:960px; height:auto; background-color:#ffffff; #background:url('bg2.png'); /*Space*/ padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px; margin-top:-10px; margin-bottom:0px; margin-left:auto; margin-right:auto; /*Shadow*/ -moz-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000; -webkit-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000; box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000; /*Border Radius*/ border-radius:0px 0px 20px 20px; -moz-border-radius:0px 0px 20px 20px; -webkit-border-radius:0px 0px 20px 20px; -o-border-radius:0px 0px 20px 20px; } input[type=text] { background: -webkit-gradient(linear,left top,right bottom,from(#333333),to(#666666)); background: -moz-linear-gradient(top, #333333, #666666); filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666'); border-width:1px; border-style:solid; border-color:#777777; color:ffffff; } .line1 { float:left; align:center; padding-bottom:0px; } hr { clear:left; color:#111111; } /* The *normal* state styling */ .btn{ background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2))); background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000')"; background-color:rgb(51, 51, 51); border:1px solid rgb(0, 0, 0); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px 10px; box-shadow:0px 0px 6px rgb(130, 130, 130); -moz-box-shadow:0px 0px 6px rgb(130, 130, 130); -webkit-box-shadow:0px 0px 6px rgb(130, 130, 130); font-size:12px; font-weight:normal; color:rgb(255, 255, 255); text-shadow:0px 0px 1px rgb(255, 255, 255); } /* The *hover* state styling */ .btn:hover{ background-image:linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2))); background-image:-moz-linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); box-shadow:0px 0px 6px rgb(0, 0, 0); -moz-box-shadow:0px 0px 6px rgb(0, 0, 0); -webkit-box-shadow:0px 0px 6px rgb(0, 0, 0); } /* The *active* state styling */ .btn:active,.btn:focus{ background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2))); background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2)); } a { font-family:arial; outline:none; text-decoration:none; color:333333; } a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; color:ffffff; } a:hover { text-decoration:none; }

I am sure that this is not all excellent, but I am studying, and this problem is now my main task :)

Many thanks.

+6
source share
3 answers

Add this:

 html, body { height: 100% }

http://jsbin.com/oyuzug

There is nothing in the body , so it has no height.

The only reason it worked without this in Chrome is because you did not include doctype as the very first line to enable standard mode.

Check them out in Chrome:

Source Code: http://jsbin.com/urimah

Your source code from doctype: http://jsbin.com/urimah/2

Conclusion: always include doctype as the very first line to avoid Quirks mode and the inconsistencies it causes between different browsers.

+3
source

Firefox shows you the right thing, because right now the body has no height . Therefore, you must determine the height your body .

Write this in your CSS:

 html, body { height: 100% }
+2
source

So the answer is flagged as valid CSS - Mozilla bug? box-shadow: the insert does not work properly does not work for me. What for? Because the example does not contain content. When you create the <body> and <html> elements with height: 100% , it creates a strange error where 100% is technically registered as 100% of the viewport, not 100% of the window height .

This is a great example of how to do this correctly: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html . The line of body and html elements in height: 100% correct, however your inner shadow should be tied to another element (cannot be body or html ) and then min-height: 100% as box-shadow: 0 0 100px #000 , attached to a gasket, for example

 html, body { height: 100% } #styled-div { min-height: 100%; box-shadow: 0 0 100px #000; }
0
source

Source: https://habr.com/ru/post/899229/

More articles:


All Articles