[Solved] Negative TOP problem

[redraw]

I need to move the navigation bar up. The problem is that the content after doesn’t follow it. It worked with margin-top. However it doesn’t work in Firefox/IE that way, and I read I should use top attribute.

• without negative top: http://i.imgur.com/kmEqwpA.png
• with negative top: http://i.imgur.com/upYp7R9.png

.navbar-inverse {
    position: relative;
    left: 0;
    right: 0;
    top: -56px;
    margin-bottom: 25px;
}

/* logo image */
img.logo-fdp { 
    position: relative;
    width: 200px;
    z-index: 2000;
}

.navbar {
    min-height: 36px;
}

[Paulie_D]

http://codepen.io/Paulie-D/pen/IuLfJ

[redraw]

@Paulie_D thanks! That example is very clear. I had forgotten that relative positioning “saved” the space, whereas margin “moved” it.
Negative margin had worked for me, but only in Chrome. I don’t know why it doesn’t work well inside Firefox or IE.

@wolfcry911 thanks! I’ve solved it by moving up the #main-content div by the same amount. It is not very pretty, but now is cross-browser compatible.

[Author]

Posts