CSS Issues

The default gallery design isn't flawless and I'm not a web designer. On this page you will find most annoying design issues. If you know the solution, please let me know.

Content area not focused by default

There are three <div> areas on the page - the top navigation bar (class div.navigation), the footer (class div.footer) and the content area (class div.master_content). Earlier the two bars were fixed position layered above the rest of the page. Empty spaces were added on the top and on the bottom of the page to ensure all content is displayed within those two bars. User was able to scroll the content just by pressing the Space key in browser.

By introducing scrolling to parent items (i.e. when you jumped one or more levels up using the navigation bar, parent item was displayed), part of the content was hidden under the navigation bar. This is a designed behaviour of <a name> links. I had to make the content area fully visible to make the jumps work as expected.

I tried several workarounds like focusing the div using JavaScript on page load but it didn't work reliably. All these solutions are dirty and I want to avoid them as much as possible.

Padded text not wrapped correctly

Text in the album list item box is positioned relatively (left: 10.3em) from the left edge depending on thumbnail width (portrait, landscape, square). It has the correct width of the box, but it's shifted from the left. Adding padding from the right won't help in total box width and only breaks floating boxes structure.

Workaround: manually add line breaks.

Image name not centered properly

Every item/thumbnail in the index list is a <a href> box with picture and text inside, set as floating. As long as it is an inline element and not block element, positioning inside is made even harder. Similar to the album item box, all texts are positioned relatively from the left. Center is an unknown formatting in this case.

Content jumping on page load in Firefox

Content in the middle <div> "jumps" up right after the browser has finished page loading. It feels like to be part of the rendering process, just not hidden enough before page is finally drawn. Jumping appears only if the <div> element has the overflow: auto; property set.

Affected versions known to me are Firefox 3.0.10 - 3.5 series. Nightly 3.7 alpha build seems to have this issue fixed.