Absolute :after displaying differently in firefox and webkit

Question

I've got a fancy drop down menu on my site at: http://www.blueleafstudio.net/environmentally-friendly-web-hosting/ (try the "about" or "support" menu items at the top)

I've got my desired behaviour on webkit browsers but firefox isn't doing the same thing.

On hover, an li:after element is shown. It has position absolute. The li element itself has position relative.

In webkit, the :after element position is relative to the li but in firefox it's position is relative to the ul tag.

Can anyone see a way round this while keeping the menu the same visually?

Doesn't work on the anchor because of the dynamic height. The :after needs to be 100% of the height of the

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

There is a smilar issue listed here: Does Firefox support position: relative on table elements?

Basically, this is an issue with Firefox support for relative positioning on table cells, or in your case and element set to display:table-cell;. The solution they propose in that example is to add a relatively posiitoned wrapper element inside the 'cell'.

<li>
    <div style="position:relative;">
        <a href="">{..}</a>
        <ul>{...}</ul>
    </div>
</li>

edited May 23 '17 at 11:49

Community

1
1

answered Apr 04 '14 at 19:00

Matthew Darnell

4,538
2
19
29

Thanks Matthew, but i'd rather not add any unnecessary markup like that. I'm trying my hardest to keep it as clean as possible... – Ralphonz Apr 04 '14 at 19:11
That's fine, but you would need to completely re-do the CSS for your menu to not use `display:table-cell;` to fix this. That would be a lot of work and I don't know that anyone is going to take the time to completely rebuild you menu CSS as an answer. – Matthew Darnell Apr 04 '14 at 19:14
Your solution looks like it might be the only way to get it working cross-browser :-( I can't get the even spacing without using display:table-cell as everything is dynamic in width and the number of items may change. – Ralphonz Apr 04 '14 at 19:23
I'm afraid I haven't been able to get this to play nice with the rest of the css in the menu. The Sub menu ul positioning goes wrong when the div is introduced... – Ralphonz Apr 05 '14 at 10:23
I'm marking this as correct as you are quite right, it is a problem with the way firefox handles positioning on table-cells, although this doesn't solve the problem for me (because of other css in the menu i've made) it looks like firefox might be bringing their behaviour inline with that of Webkit: https://bugzilla.mozilla.org/show_bug.cgi?id=35168 – Ralphonz Apr 05 '14 at 10:47

Absolute :after displaying differently in firefox and webkit

1 Answers1