How can a URL fragment affect a CSS layout?

Question

Compare these 3 URLs (look at the top navigation bar in each case):

1. http://fast.kirkdesigns.co.uk/blog
2. as above but with the url fragment #navigation
3. as above but with the url fragment #node-2655

Note, that the only difference is the URL fragment on the end.

The first two pages display absolutely fine (in Firefox at least). It's the third one where the problem lies. The fragment #node-2655 pushes the top navbar off the top of the screen. When you then scroll back up to the top of the page, the navbar has been cut in half. This happens when using any URL fragment that causes the navbar to be out of the initial viewport when the page is first loaded.

So, how can using a url fragment affect the css layout like this?!

THE SOLUTION: as suggested below, removing the overflow: hidden on the container element that held the navbar fixed the problem. I'd love to understand why though!

Answer 1

Remove the overflow:hidden on #main in css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

I'd say it's a rendering bug in FireFox as it's fine in Opera. There shouldn't be anyway an anchor would change the CSS like you say (unless you are using jQuery or something).