1 Reply Latest reply on Mar 31, 2012 6:16 AM by Ken Binney

    Fixed Positioning - left hand side bar navigation

    flashyash

      Hi there,

       

      I have a multi page website, designed in css which is based on a templat apart from the index page which is a seperate desgin in itself.

       

      I am having a few minor problems......

       

      Firstly, on the internal pages (i.e all but the index page) I have a left hand navigation which is postioned to be fixed. This works......, however when the sreen size is reduced in height and then the user scrolls down the left hand navigation runs off the bottom of the page - any ideas?

       

      An example of this is at: http://www.ecoast.co.nz/newsite/marine-consultancy-projects.php

       

      And the css for the left hand nav is:

       

      #internal_left_nav {

          width: 140px;

          float: left;

          margin-top: 0px;

          margin-bottom: 50px;

          padding-top: 0px;

          padding-bottom: 0px;

          padding-left: 0px;

          border-top-width: 0px;

          border-right-width: 0px;

          border-bottom-width: 0px;

          border-left-width: 0px;

          border-right-style: none;

          border-top-style: none;

          border-bottom-style: none;

          border-left-style: none;

          overflow: auto;

          padding-right: 5px;

          position: fixed;

          height: 100%;

      }

       

       

      Second problem is that in internet Explorer 9 - in the compatibility view on a PC, this nav also jumps to the right hand side of the page - however not in any other browsers I know of, both on a Mac and PC.

       

      Third problem, is within some browsers again the main container for the page seems to jump on the about us page: http://www.ecoast.co.nz/newsite/marine-consultancy-about-us.php . This page is based on the same template as the other, however the only difference is that there are tables in it and no images on the r.h.s in the content. This again only happens on a few browsers......

       

      Does anyone know ho to keep it so no matter what the screen size is - the ratios stay the same as I only see this problem on my screen which is a wide screen.

       

      Any ideas, would be more than appreciated

       

      Thanks