Dropdown offset on chromemenu

[adelante]

Chrome menu http://www.dynamicdrive.com/dynamici...rome/index.htm

Thanks for this excellent menu tool, I really like the way you can easily customise so many attributes.

I have a problem with a website that I'm designing. The site is a fixed width layout of 795px and I'm using CSS to define the styling aspects. I have managed to get everthing working with the exception of the drop down menu. These are ofset to the right by roughly half the difference between the screen resolution and the layout width (795px). If I increase the screen resolution the offset increases, if I reduce it deminishes.

I feel the solution lies in the chrome.js but not being familiar with js I don't know what I'm looking at.

Can anyone help.

Many thanks,

Joe

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[adelante]

Thanks ddadmin for your help I've placed the home page in a WIP directory on my server, you can view it at: http://www.adalante.com.au/wip

Please note the navigations doesn't link to any other pages. I wanted to nut out the menu before I proceed.

Best wishes and thanks again,

Joe

[adelante]

Hi everyone, I found the problem. I had a div in the CSS called wrapper. This defined a fixed page width of is 795px and was positioned relative. When I removed the positioning property the problem resolved itself.

It was great to be able to look at the other posts and see some websites that used chromemenu. That's where I got the hint. Thanks for a great forum.

regards,

Joe

[areilla]

RE: http://www.dynamicdrive.com/dynamici...rome/index.htm

I know this is piggybacking, but this is exactly the same problem I'm having. This is the page I'm working on: http://post.queensu.ca/~gunsinge/ClassicsHome/
Please pardon the messy code. I have combined the chrome.css code with the existing stylesheet main.css, and it seems to work fine. There is the other script included in the head of the page, too, but aside from looking a mess, it seems to work okay as well. And if it's working, I'm not going to mess with it. Does this page validate? Not yet. This is just a very rough working copy.

The trouble is my boss wants the page to be have wide R and L margins, so I've thrown the whole kit and kaboodle into (div id="container")...(/div), defined the margins, and defined the width of the div. Seemed to work beautifully...until I noticed that it threw my drop-down menu all out of whack. Knew it was too good to be true.

So...now what? Everything else looks pretty good. I just want to fix the offset of the drop-downs. If you have any advice, please speeaak sloooowly; most of what I know about css, html, and the like is self-taught, and .js is a whole new can of worms to me. I only grasp the vaguest notions of .js, and the css & html knowledge is a bit full of holes. Like swiss cheese. Thanks in advance. Let me know if you need me to C&P any of the code if you can't access it directly for any reason.

Erin

[areilla]

(Just bumping up this thread to see if there's anyone around that can help me out with this...)

[jscheuer1]

Your solution is the same as the one that adelante found, remove 'position:relative;' from the container. Additionally, rather than center the content only in certain sized windows, use auto margins for centering in all sizes of windows wide enough to fit the base width of the container:

#container {
width: 800px;
margin-left: auto;
margin-right: auto;
           }

[areilla]

Many thanks, John! I'll give that a try.

EDIT>> SWEET!! It works like a charm. You're a doll, John! Thanks again.