Layout perfect in Safari but misbehaving in Firefox!

[npmm]

Hello, I’m working on a school project and I have a jQuery gallery in a div that works just fine in Safari but it gets cropped by the navigation bar in Firefox. I don’t know where I’m going wrong but here is the CSS:

.galleria-container {
height: 90%;
overflow: hidden;
position: fixed;
margin-top: 10%;
left: 0;
width: 96%;
background: #fff;
}
.galleria-container img {
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.galleria-stage {
width: 98%;
height: 75%;
margin-left: 1%;
position: absolute;
z-index: -2;
}

Thanks in advance for your help!
I’m pretty new to this!

[npmm]

Here is a link to the site if that helps: http://www.grayscale.net63.net/

[npmm]

It works for me… Can anyone identify why a div looks much lower down on the screen in Firefox only?

[chrisburton]

Fix these, first.

[thomas]

The problem is with your margin-top property for your “.galleria-container” rule on line 15 of http://www.grayscale.net63.net/js/galleria.fullscreen.css?1317251748254.

Either adjust it to something smaller than 10%, or try and figure out why Mozilla is treating it differently than WebKit.

[npmm]

I changed the margin-top to a px value rather than % and it worked just fine. Currently working on closing my tags properly. Thank you for your help.

[Author]

Posts