Problem with negative margin value in Firefox

Question

I have a negative margin issue in Firefox. My negative margin works in Chrome, but not in Firefox.

.search-bar { height: 108px; position: relative; margin-top: -10px; } 

Answer 1

The solution is simple:

 .search-bar { height: 98px; position: relative; top: -10px; } 

I replaced margin-top with top with the same value, and I reduced height with the old margin-top value and worked like a charm.

Answer 2

For anyone who has the same problem, just add float:left to the DOM element with a negative field. Thanks to @Deepak Yadav for the solution.

Answer 3

Use the top property instead of margin-top and assign a relative position

My example:

 div span { display: inline-block; top: -10px; width: 100%; height: 3px; line-height: 40px; position: relative; 

}