0

I have big trouble with CSS positioning with absolute element inside display:table-cell object. All browsers render correctly except Firefox.

My HTML looks like this:

<ul class="slider">
    <li rel="sl1">
        <span class="sltitle">Item 1</span>
        <span class="pointer"></span>
    </li>
    <li rel="sl2">
        <span class="sltitle">Item 2</span>
        <span class="pointer"></span>
    </li>
    <li rel="sl3">
        <span class="sltitle">Item 3</span>
        <span class="pointer"></span>
    </li>
</ul>

and CSS:

.slider {
    list-style: none;
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
}

.slider li  {
    display: table-cell;
    border: 1px solid #1C1A1A;
    position: relative;
    overflow: hidden;
}

.slider li span.pointer {
    display: block;
    border: 1px solid red;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

Here is the JSFIDDLE for that: http://jsfiddle.net/zur4ik/SN7zL/

Please open this link in Chrome and then in Firefox, you'll see the difference. Do you know any proper way how to fix this issuer?

zur4ik
  • 6,072
  • 9
  • 52
  • 78
  • Is the issue the fact that Firefox includes scrollbars? Or the borders overlapping? (Both?) – Trojan Aug 02 '13 at 10:24

2 Answers2

3

Firefox has issues with absolute positioning and display:table-cell - see this

You need to wrap the element in a block element with relative positioning and then it will work:

Example

Community
  • 1
  • 1
Pete
  • 57,112
  • 28
  • 117
  • 166
1

May be it's problem grow from this problem - Does Firefox support position: relative on table elements?

And - Positioning context on table-cell element in Firefox

Wrap the element with a div as position:relative.

http://jsfiddle.net/N6bUU/2/

.rel {
    position:relative;
    display:block;
    height: 100%;
    width:100%;
}
Community
  • 1
  • 1
WaNgeL
  • 198
  • 1
  • 12
  • I found this solution, but when I wrap it in DIV with `position:relative` it loses parent element height. I mean, this `.pointer` element should be 100% height - as you can see on your updated fiddle, it's not 100% height. – zur4ik Aug 02 '13 at 10:47
  • Use instead of
    , like in Pete answer.
     – WaNgeL Aug 02 '13 at 11:18
  • I forgot add some css rules - .rel { position:relative; display:block; height: 100%; width:100%; } – WaNgeL Aug 02 '13 at 11:21
  • Thanks @WaNgeL, Pete's solution helped. +1 for you help. – zur4ik Aug 02 '13 at 11:53