margin-top on firefox and chrome

Question

I have a side navigation bar on my website. The sidebar slides with you and changes margin-top. On google chrome, it follows you, while in firefox, it makes all the boxes follow you which doesn't let you scroll down the page. http://jsfiddle.net/rDV3T/ This is an example.

<span class="hi">HI</span>
<span class="hello">Hello</span>

CSS

.hi {
    margin-top: 10px;
    background-color: red;
    display: inline-table;
}
.hello {
    display: inline-table;
}

If you test on firefox, all the boxes goes down 10 px, while in chrome only the assigned box (hi) goes down. How could I fix this? Thank you and sorry for my bad english and explanation.

Answer 1

If you add vertical-align: top; to your hello class the example looks the same on all browsers.

.hello {
    display: inline-table;
    vertical-align: top;
}