CSS - Mozilla Bug? Box-Shadow:Inset Not Working Properly

CSS - Mozilla bug? box-shadow:inset not working properly

Add this:

html, body {
    height: 100%
}

http://jsbin.com/oyuzug

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

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

Test these in Chrome:

Your original code: http://jsbin.com/urimah

Your original code with doctype: http://jsbin.com/urimah/2

Conclusion: Always include a doctype as the very first line to avoid Quirks Mode and the inconsistencies it brings between different browsers.

Box shadow not working in mozilla

Try with box-decoration-break and padding CSS properties. It would be almost helpful to make this effect in a single sentence break.

h1 {  color: #fff;  font-size: 50px;  background: #101010;  line-height: 1.4 !important;  display: inline !important;  text-align: justify;  letter-spacing: 4px;  padding: 0 15px 0 10px;  box-decoration-break: clone;  -webkit-box-decoration-break: clone;}

<h1>THE <br> SILK <br> ROAD</h1>

Firefox not properly displaying inset box-shadow with border-radius

This is because of display: table-cell; in your .sidebar-nav > .menu-item {} selector. Fix it by adding display: block; to your .sidebar-nav > .active class:

function toggleNav(elem) {  $('a').removeClass('active');    $(elem).addClass('active');}

.sidebar {    text-align: center;    border: 1px solid #ddd;    border-radius: 8px;    color: #888;    background: #eee;    width: 250px;    height: 100%;}.sidebar-nav {    padding: 0px;    display: table;    width: 100%;    border-bottom: 1px solid #ccc;    border-collapse: collapse;}.sidebar-nav > .menu-item {    color: #888;    padding: 10px;    vertical-align: top;    display: table-cell;    cursor: pointer;    text-decoration: none;    outline: none;}.sidebar-nav > .menu-item:first-child {    border-radius: 8px 0 0 0;}.sidebar-nav > .menu-item:last-child {    border-radius: 0 8px 0 0;}.sidebar-nav .menu-item + .menu-item {    border-left: 1px solid #ccc;}.sidebar-nav > .menu-item:not(.active):hover {    background-color: #ddd;}.sidebar-nav > .active {    color: white;    box-shadow: inset 0px -2px 4px 2px #888;    background-color: #aaa;    display: block;}

.sidebar-main {    padding: 10px;}
.sidebar-h1 {    font-size: 1.2em;    font-weight: bold;    margin: 5px;}
.sidebar-row {    padding: 15px;    position: relative;}
.sidebar-row:after {    content:'';    width: 50%;    height: 1px;    background: #ddd;    position: absolute;    left: 25%;    bottom: -1px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><div class="sidebar">    <div class="sidebar-nav">         <a class="menu-item active" href="#" onclick='toggleNav(this)'>          My Page        </a>        <a class="menu-item" href="#" onclick='toggleNav(this)'>          Your Page        </a>        <a class="menu-item" href="#" onclick='toggleNav(this)'>          Our Page        </a>    </div>    <div class="sidebar-main">        <div class="sidebar-row">            <div class="sidebar-h1">User Info</div>Phasellus blandit nulla ante, non tempus sem imperdiet sagittis. Vivamus condimentum et est eu iaculis. Nam semper nunc quis rhoncus viverra. Nam lorem nulla, feugiat at sodales sit amet, tempor quis nisi. Sed dictum in tortor et dapibus. Aliquam erat volutpat. Vivamus venenatis faucibus justo vitae rutrum. Sed in viverra ipsum. Duis et metus at metus euismod fermentum sed eu dolor.</div>        <div class="sidebar-row">            <div class="sidebar-h1">User Settings</div>            <label>                <input type="checkbox" />Settings</label>            <br>            <select>                <option>Words</option>                <option>Things</option>                <option>Stuff</option>            </select>        </div>    </div></div>

CSS3 box-shadow rendering issue in Firefox

Please use box-shadow: inset 0 0 0 1px #0084A3; it gives same output in both firefox and chrome browsers.

Box-shadow for each table cell not showing in Firefox

apparently this bug report causes the same issue:

https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Css box-shadow is not working in firefox

Hi apply to the browser kit as like this

firefox and chrome

-

-moz-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
box-shadow: 0 0 20px rgba(0,0,0,0.4);

CSS box-radius ruins box-shadow inset effect on firefox

Setting two shadows seems to fix it at this time :

.box {  width: 100px;  height: 100px;  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;  box-shadow: inset 0 18px  #4D7594, inset 0 20px 3px 1px #4D7594;  border-radius: 16px;}

<div class="box"></div>

Firefox not rendering correctly with: border-radius,box-shadow and border

It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.

Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:

In your html:

<div class="fakeborder"><div class="sub">Hm</div></div>

and in your css:

.sub {
    ...
    border: 0px solid black;
    ... 
}

.fakeborder{
    margin:0;
    padding:10px;     /*The fake border width*/
    background:black; /*The fake border color*/
}

CSS fix for firefox: Box shadow property

The shadow part of your question is a duplicate of

Box shadow CSS with a <fieldset>. Firefox vs Chrome

Not the best solution as you will have to have a fixed height and width for the <legend> but adding this could work

.thzPartsHeader{
    position: absolute;
    top: -9px;
    left: 50%;
    margin-left: -75px;
}
.thzPartsContainer{
  padding-top: 9px;
  position: relative;
}

fiddle: http://jsfiddle.net/FBca7/2/

---

Related Topics