StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS - Mozilla bug? box-shadow:inset not working properly
text
Body
copied!<p>Basically the below code should simply be a white page with a shadow around the edge. This works fine in Chrome but I can't seem to get it to work in Firefox!</p> <pre><code><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> </code></pre> <p>View the page here:</p> <p><a href="http://pastehtml.com/view/bagevr6ke.html" rel="nofollow">http://pastehtml.com/view/bagevr6ke.html</a></p> <p>Look at it in Chrome then Firefox, and tell me if you see a difference : )</p> <p>Cheers</p> <p>EDIT: So the post below explained how to fix the above code, a CSS reset worked and also i learned about quirk mode and doctypes :)</p> <p>However the CSS page i am working on is still suffering from this bug no matter what reset i use. I am not currently using a Doctype as i am not sure what i should put, or whether it would fix the bug. </p> <p>Here is the complete site:</p> <p><a href="http://middle.dyndns-server.com/results.html" rel="nofollow">http://middle.dyndns-server.com/results.html</a></p> <p>And the stylesheet:</p> <pre><code>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; } </code></pre> <p>I am sure its not all great but i am learning and this issue is my main focus right now : )</p> <p>Thanks a lot.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload