I've put a lot of effort into this website, but I'm still facing challenges with a few aspects. Here's the current setup:
- Top navigation bar: 68px in height, full-width, fixed at the top.
- Bottom navigation bar: 42px in height, full-width, fixed at the bottom.
- Content: images of varying widths that are full-height and floated to the left.
The content is navigated through horizontal scrolling only. It's crucial that the images span from the bottom of the top nav bar to the top of the bottom nav bar without any cropping or obstruction. Additionally, it's essential that resizing the browser window or rotating a mobile device doesn't disrupt this layout. Currently, my code works flawlessly in Chrome and Safari (with one exception), but encounters issues in Firefox and Opera. I haven't tested it in IE yet. Here's what I have:
#header {
width: 100%;
height: 68px;
}
#content {
position: absolute;
top: 68px;
left: 0;
right: 0;
bottom: 42px;
z-index: -10;
width: auto;
height: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#content #frame {
max-width: 80000px; /* (To ensure sufficient horizontal space for images) */
}
#content #frame img {
height: 100%;
width: auto;
float: left;
margin-right: 5px;
position: relative;
z-index: 100;
}
#footer {
width: 100%;
height: 42px;
position: absolute;
bottom: 0;
}
Essentially, I am creating a window within a window and then scrolling within that window, which causes the issue in Safari mentioned earlier. Aside from that, it functions perfectly in Chrome and Safari. However, in Firefox and Opera, the images don't scale to fit the window height.
To view the site yourself, visit: . The password is "letitrain".
I'm considering eliminating the "window within a window" approach altogether (simple and solves the Safari problem), but I can't seem to find a solution that works consistently across all browsers. Any assistance would be greatly appreciated.