Jump to content

fixed menu bar... or is it?


yoshida
 Share

Recommended Posts

Hi all.I decided to spend some of my free time re-designing one of my websites. The header is all the way on the left, directly below it (left side of the screen) is a menu bar and directly right from that bar is the main content. The main content and header scroll, the menu bar doesn't. It remains it's position on the screen.This is true for Firefox 2.0.0.1.And not for Internet Explorer 6.0.2900.CSS:

#menu {position: fixed;float: left;width: 100px;margin-top: 10;margin-left: 50px;}

Is there a way to solve this?While we're at it, when in IE the screen is narrower than the total width of the page, the content container drops below the menu bar. Is there a way to solve that issue too?CSS:

#content {width: 702px;text-align: center;margin-left: 210px;margin-right: auto;margin-bottom: 20px;}

As you can see the left margin is more than the total width of the menu bar.I can create a sample-page if required, but I'm hoping more experienced css developers may notice flaws that I might've overlooked.Help appreciated (very much).Also: I'd like to wish each and every reader of this post happy hollidays.

Link to comment
Share on other sites

Like [removed]You can view it fine in IE 6 & 7, Firefox 1.5 & 2.0 and in Opera.

Edited by RahXephon
Link to comment
Share on other sites

yeah thanks, I guess I'll manage.But can you please be more specific, and use the code I posted? That would help a great deal (as in taking an hour of T&A off my workload).EDIT: I'm giving up on this for now. Reproduction of the code resulted in the menu disappearing behind the main body (and still not on a fixed position).I even added this dope-a$s code:

<!--[if lte IE 6]>   <style type="text/css">   /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;}   /*]]>*/   </style><![endif]--><!--[if lte IE 6]><style>   /*<![CDATA[*/ #adsie {position:absolute; top:10px; left:0;}   /*]]>*/</style><![endif]-->

Let's say a fixed menu is an added plus for firefox users.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...