In Firefox, the main page goes to the right

[Joe]

When viewing my site in Firefox, the whole page below the menu moves across to the right.

The problem occurs when I use the following CSS:

#site-navigation {
margin-top: -50px;
}

I’m not sure why that CSS would cause the problem though, and it works fine in Chrome.

The reason for the above CSS is to change the height of the header and bring the menu up to it. If there is an alternate way to do this that doesn’t cause this weird problem, please let me know.

This is the full CSS used for this:

#masthead {
height: 80px;
}
#site-navigation {
margin-top: -50px;
}

It is only that one section that causes the problem though.

http://www.indienew.com

Thanks.

[Alyssa]

@moonworks edit this element instead:
.header-inner{min-height:84px;}
This is the default setting and is required if you are using floating admin bar because the bar takes up that much room when logged in.

[Joe]

I’m not using the floating admin bar, so am just looking for a way to have less space taken by the white area in the header.

I tried lowering that number, but it doesn’t change it, and using it alongside the masthead css still leaves the navigation bar in its original position.

[Alyssa]

@moonworks just remove your previous code and try using my code. Append !important if you need to.
You could also try removing min-height and defining the height:
.header-inner{min-height:initial; height:40px;}

[Joe]

Thanks, that did the job 🙂

[Alyssa]

Awesome!