CODEWITHSUNDEEP
htmlcssfirefoxwidthabsolute
BackSlash
BackSlash

Reputation: 22233

Firefox position:absolute and width: 100% on display:table-cell weird behaviour

I'm trying to make a simple horizontal menu for my website.

This is what I have so far.

HTML:

<div id="header-buttons">
    <div class="button ">
        <div class="button-stripe" style="background-color: rgb(200, 113, 55); bottom: -41px;">
        </div>
        <a class="button-text" href="#" style="bottom: -41px;">
            First
        </a>
    </div>
    <div class="button ">
        <div class="button-stripe" style="background-color: #0069ff">
        </div>
        <a class="button-text" href="#">
            Second
        </a>
    </div>
    <div class="button ">
        <div class="button-stripe" style="background-color: rgb(55, 200, 55); bottom: -41px;">
        </div>
        <a class="button-text" href="#" style="bottom: -41px;">
            Third
        </a>
    </div>
</div>

CSS:

#header-buttons {
    position: relative;
    top:15px;
    height: 45px;
    background-color: #333;
    overflow: hidden;
    font-family: "Open Sans Condensed";
    display: table;
    width: 100%;
}

.button>a.button-text {
    position: relative;
    top: 0;
    left:0;
    color: #fff;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.button>.button-stripe {
    position: absolute;
    bottom: -41px;
    left: 0px;
    width: 100%;
    height: 45px;
}

.button {
    position: relative;
    display: table-cell;
    height: 100%;
    line-height: 45px;
}

Javascript:

$(function() {
    $(".button").each(function(index) {
        var me = $(this);
        if(me.hasClass("selected")) {
            me.css('backgroundColor', me.children(1).css('backgroundColor'));
            return;
        }
        var children1 = me.children(1);
        me.mouseenter(function() {
            children1.stop().animate({bottom: 0}, 250);
        });
        me.mouseleave(function() {
            children1.stop().animate({bottom: -41}, 250);
        });
    });
});

Everything works fine in almost all browsers, but in firefox it seems the div.button-stripe takes width:100% of #header-buttons instead of .button.

What happens in all browsers: enter image description here

What happens in firefox: enter image description here

There is also a JSFiddle here

Why is this happening? Is there a workaround? My firefox version is 28.0

Upvotes: 0

Views: 1388

Answers (1)

Netsurfer
Netsurfer

Reputation: 5542

Firefox has a known problem with position:relative on elements with display:table[-...]. See e.g.: Firefox, display:table-cell and absolute positioning

So you have to add another container element to achieve the relative positioning.

I have updated your JSFiddle (roughly, just to show the concept). I also had to slightly change your JS code.

Updated JSFiddle

Upvotes: 1

Related Questions