1

[Duplicate of Does Firefox support position: relative on table elements?]

I have an unordered list with vertical rules between the list-items:

HTML

<ul class="list-inner-border">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

CSS

.list-inner-border {
    height: 100px;
}

.list-inner-border li {
    display: table-cell;
    position: relative; // not having this usually causes the misbehaviour
    width: 1%;
}
.list-inner-border li + li:before {
    background-color: red;
    content: '';
    height: 80%;
    left: 0;
    margin-top: 5%;
    position: absolute;
    top: 0;
    width: 1px;
}

span {
    background-color: gray;
    display: block;
    height:90px;
    margin: 5px;
}

Fiddle

The above works in all browsers except Firefox, which behaves as if the container of position:absolute does not have positioning of its own (common oversight with position:absolute):

Chrome:

List inner border working in Chrome

Firefox:

List inner border not working in Firefox

In Firefox, all the :befores have jumped outside their container and stacked vertically along the edge of the root element.

Community
  • 1
  • 1
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
  • Why the link? Don't you have enough rep to vote to close? Though if you can't, I understand there. I have never voted to close my own question, so I don't know if its any different. – Daedalus May 29 '14 at 20:29
  • I do have enough rep ([Privilege: Close questions](http://stackoverflow.com/help/privileges/close-questions)). I voted to close rather than deleting in case someone experiences a similar issue. The root problem was Firefox ignoring positioning of table. – Jakob Jingleheimer May 29 '14 at 20:39
  • .. But, you didn't vote to close. I'm the only one that has. Unless there's something I'm missing, all you did was edit your question to include a link to a possible duplicate at the top. – Daedalus May 29 '14 at 20:59
  • 1
    Oh whoops. I don't know what happened. I added the link to the question for the time before it gets enough votes to close. I guess I forgot to add my own vote. – Jakob Jingleheimer May 29 '14 at 21:12

1 Answers1

2

Elements with position: absolute; are actually meant to refer to the next parent with position:absolute;. jacob proved me wrong here.

If you assign 0 to left or top, they align to the root element. Leave those away and the rules' positions are correct in firefox.

Because all your percentage based values are differently calculated, you might need absolute values there. You could also make a fallback for firefox: Targeting only Firefox with CSS

Sorry I haven't found anything better

Community
  • 1
  • 1
Felk
  • 7,720
  • 2
  • 35
  • 65