position:fixed - difference in firefox and chrome

Question

I am using Skeleton boilerplate to create a responsive design.

This is how it looks in Chrome and Firefox respectively

Chrome: http://screensnapr.com/v/iaXYDS.jpg

Firefox: http://screensnapr.com/v/EW6HZM.jpg

as you can see, the gray bar which is supposed to be the menu looks fine in chrome. what i am trying to achieve is a sticky menu which is relatively fixed within its parent.

here's the css for the #menu (gray bar)

#menu {
    z-index: 1000;
    background: #666;
    position: fixed;
}

Here is the class of the #menu using the Skeleton boilerplate.

<div id="menu" class="sixteen columns">

Which will in give the #menu these following styles

.container .sixteen.columns {
    width: 940px;
}

.container .column, .container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

You can test it through this URL

http://home.piratelufi.com/sticky/

and download the source code (sorry for the cluttered files)

http://home.piratelufi.com/sticky/sticky.zip

Answer 1

Remove to display : inline in your css

.container .column, .container .columns{
display:inline; // remove this line 
}

Because you define float:left;