Firefox is not supporting position relative on display table-cell

Question

Firefox is not supporting position relative on display table-cell. Here's what I've tried:

HTML

<section class="lightOrangeStrip">
    <i class="icon-Chart"><img src="images/chart.png" alt="chart-icon" /></i>
    <div class="orangeContainer">
        <h4>Our Promise To You:</h4>
        <ul>
            <li>Deliver Quality, On Time Solutions</li>
            <li>Develop A Strong Long Term Business Relationship</li>
            <li>Help Your Business Grow By Reducing Any IT Overhead</li>
            <li>Ample List Of Services</li>
            <li>Tools To Help You Manage Your Client Account More Efficient</li>
        </ul>
    </div>
</section>

CSS

.lightOrangeStrip {
    width:50%;
    display:table-cell;
    vertical-align:top;
    margin:0 -3px;
    background:#f0b856;
    color:#fff;
    padding:25px 10px 25px 80px;
    position:relative;
    border-bottom:solid 1px #fff;
}
.stripWrap {
    width:100%;
    display:table;
    position:relative;
}
.lightOrangeStrip .icon-Chart {
    position:absolute;
    left:-74px;
    top:20%;
    height:54px;
    width:54px;
}

What's wrong?

Please provide more information and the code + Example (JSfiddle etc.) that leads you to your question. — Nico O, Feb 15 '14 at 14:53
Possible duplicate of: http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements — Nico O, Feb 15 '14 at 14:54
that is a firefox bug so you need to workaround it. so what are you trying to do in the first place? — anurupr, Feb 15 '14 at 14:54
It's not a firefox bug, it's the proper thing to expect from a table cell, since table cells don't accept position attributes...webkit browsers might ignore it and apply it, but it's WRONG to apply position attribute to cells (and since the div is `display:table-cell` it's inheriting the pluses and minuses from this ) — drip, Feb 15 '14 at 15:09

score 1 · Answer 1 · answered Feb 15 '14 at 15:45

1

table-cell element let the element behave like a element And it won't take property like margins, and positions.

I guess for your situation you can make that element display:inline-block; then define position properties.

answered Feb 15 '14 at 15:45

Suman KC

3,478
4
30
42

Firefox is not supporting position relative on display table-cell

1 Answers1