CMS Made Simple Forums

I have the Horizontal CSSMenu in place on a site I am developing. I would simply like to center the menu under the header. The way I have the stylesheet setup works perfectly in Safari, Firefox (both Mac and Windows) and Opera but sadly not in Internet Explorer (specifically IE 6 & 7) Does any one have any insight as to how to get around this without pseudo-centering as previously suggested in the forums.

The link:
http://laguz.pair.com/marketum/_cmsms_ccfm/

And a little CSS:

#menu_vert {
  background: #fff url(_assets/ccfm_navigation.gif) no-repeat 0 0;
  height: 35px;
  width: 800px;
  text-transform: lowercase;
}

/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb { clear: both; }

#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
}

#primary-nav li li {
  width: 200px;
}

#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  margin: 0 auto;
}

I have the same problem!! Anyone any thoughts ?

Thanks in Advance.

Chris

Looks centered to me.

Nullig

We used psuedo-centering with margins as a temporary solution. We hope to write a javascript that will determine the widths of each top-level menu item, combine those widths and then pass that value to the CSS. IE needs a width. Any insight that anyone has would be greatly appreciated.

You could use dispaly:inline for li elements but you have to create very different paddings,margins,line-height etc. for ie to look same for all browsers. As you are using drop down menu Opera 9.2* will not position child ul right way in this situation. So unless you create some javascript that you are happy with you might keep it as it is now. This is my experience and if someone else has solution I would be happy to hear.

Most times I've had to give the surrounding div a width the menu will just fit in, then call it to be margin: 0px auto to center it...