Fixed positioning issue Firefox; IE too

Question

In Firefox on this page position fixed along with smooth-scroll.js works perfectly.

On this page in Firefox the right nav does not display all nav items it gets cut off.

How to fix? Use CSS?

Also in IE 6 through 8 using fixed positioning breaks the site.

Appreciate any thoughts and suggestions.

Answer 1

1. give .rightside-position a bottom value: ie: bottom: 40px that will stop it from being cut off.

2. IE 6 (maybe 7) doesn't understand position: fixed. try this: http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/

Answer 2

The hidden nav elements seem to be there but you've just positioned them out of the page so they look hidden even when you scroll down.

This is probably not what you want to hear, but without JavaScript complications, I think the pratical solution here would be to get rid of the position:fixed completely. It doesn't seem to serve any strong usability purpose. Another solution might be to reduce the spacing between the <li> elements to pull the list up, but this won't solve it permanently if this list will grow in the future.

Answer 3

Your design won't allow for that area to be fixed positioning, because too many nav items will extend off the page and becoming inaccessible.

You can either tighten up the spacing between the sidenav items (which probably still won't work for 1024 x 768 screens), or you can removed the fixed positioning and let it scroll like normal.

Answer 4

You need to run through your list of 46 HTML errors and 16 CSS errors.