Menu
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;
}
370
It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well. It is highly compatible. Negative margins are wholly supported across all modern browsers (and IE6 in most cases).
The downside of negative margins is they are difficult to debug and will make your CSS harder to read. The most often misuses of negative margins that I encounter is when it is used to make up for incorrect layouts elsewhere on the site. This is indeed bad practice.
The margin is described as negative or clean when the pathologist finds no cancer cells at the edge of the tissue, suggesting that all of the cancer has been removed.
You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.
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.
174
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
