Issue with negative margin value in Firefox

css firefox margin

16,488

Solution 1

The solution simply :

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

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

Solution 2

For everyone still having the same problem, just add float:left to the DOM element with the negative margin. Thanks to @Deepak Yadav for the solution.

Solution 3

I did this and this works so perfect.

.your__class{
    display:inline-block;
    vertical-align:top;
    margin-top:-100px;
}

Solution 4

Please use top property instead of margin-top and assign position relative

My Example:

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

}

View more solutions

16,488

Author by

Al-Mothafar

I believe you click on my name to see my profile and know more about me :D In my job field I'm now working as Senior Java Developer, I have good knowledge of related skills on Java mainly; Playframework, Ebean (ORM), JSF, Primefaces, and excellent on HTML/CSS/JS and Love Angular :) also I write Hybrid Mobile Apps with Ionic, I have good background in C++, C#.Net, VB.Net and I can code with them, actually I did, my final project in University was .Net and finished a good real production product in .Net CF for windows mobile 5.5. I'm graduated with Excellent grade on Bachelor of Computer Science in Al-Balqa` Applied University . I'm familiar with Windows and Linux based systems like CentOS, I believe Windows The best OS for personal use and entertainment, Linux for productive servers, Mac OS for designers but all are good for developments, and all systems are awesome :) **As a Person live in this world and outside specialization in Job Field, I'm Muslim Arabian, Love Cats and Spiders specially, and every thing good for Natural in generally keep looking on the sky on blue in day and stars and moon in night < romantic :D :P Finally, I'm glad & appreciate you read about me :)

Updated on September 15, 2022

Comments

Al-Mothafar over 1 year
I have an issue with a negative margin in Firefox. My negative margin works in Chrome but doesn't in Firefox.
```
.search-bar {
    height: 108px;
    position: relative;
    margin-top: -10px;
}
```
Thomas Gak-Deluen over 8 years

But then again if you don't know the height this is probably not the correct way to do it
Al-Mothafar over 8 years

@tgdn try to ignore height. in my case here i was need to take care about height, if you don't have height then you don't have to do anything with it, but you maybe need do some wrapping in some cases.
Deepak Yadav over 7 years

if it still doesn't works for you. Try giving the current div display:inline-block; property, then it works in Firefox or you can use float:left as well. and if display: inline-block; or float:left breaks your width issue, give it another width: 100%;.
Al-Mothafar over 6 years

actually, a float is not just option property, it could break the layout!
John Isaiah Carmona over 6 years

Yup, but in my case it works perfectly and the solution above doesn't. I'm just giving another option for people that might stumble on this problem. 😁
Daan over 5 years

Using display: inline-block should also work and may be more compatible with your layout than float:left
Wasim Sayyed over 5 years

this answer should be marked correct, float: left and width: 100% worked like a charm