margin-top on firefox and chrome

browser, css, margin

Solution

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;
}

Problem

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.

Original source