Last Updated: February 25, 2016
· chail93

Position Relative And Display Table In Firefox

Hey guys,
I had a problem, that "display: table;" and "position: relative" don't work in Firefox. Because of this I have two examples for you - one with the solution, which works and the other, which don't work in Firefox.

I don't test it in other browser. Only Chrome and Firefox


    <div class="wrap">
        <ol class="group">
            <li class="processed"><div>Step1</div></li>


body {
    margin: 25px;
.group {
    content: "";
    display: table;
    clear: both;
ol {
    border: 1px solid #ccc;
    display: table;
    table-layout: fixed;
li {
    display: table-cell;
    background-color: #fff;
    padding: 10px;
.processed {
    background-color: #f2f2f2;
.processed > div {
    position: relative;
.processed > div:before {
    content: '';
    background-color: #fff;
    position: absolute;
    right: -10px;
    top: -10px;
    width: 10px;
    height: 38px;
.processed > div:after {
    content: '';
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 15px solid #f2f2f2;
    position: absolute;
    right: -15px;
    top: -10px;


Good solution: <br>
Bad solution: