Forums

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/

Paulie_D

Link does not take you to indicated location at the moment.

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.

treehouse : what would you like to learn today?

Forums

[Solved] Layout perfect in Safari but misbehaving in Firefox!