Center the Horizontal CSSMenu in IE 6 and 7

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
popefish
New Member
New Member
Posts: 7
Joined: Tue Jun 26, 2007 12:05 pm

Center the Horizontal CSSMenu in IE 6 and 7

Post by popefish »

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;
}
Chris
Forum Members
Forum Members
Posts: 49
Joined: Tue Mar 22, 2005 6:59 pm

Re: Center the Horizontal CSSMenu in IE 6 and 7

Post by Chris »

I have the same problem!! Anyone any thoughts ?

Thanks in Advance.

Chris
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm

Re: Center the Horizontal CSSMenu in IE 6 and 7

Post by Nullig »

Looks centered to me.

Nullig
popefish
New Member
New Member
Posts: 7
Joined: Tue Jun 26, 2007 12:05 pm

Re: Center the Horizontal CSSMenu in IE 6 and 7

Post by popefish »

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.
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: Center the Horizontal CSSMenu in IE 6 and 7

Post by KO »

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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Center the Horizontal CSSMenu in IE 6 and 7

Post by Dr.CSS »

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...
Post Reply

Return to “Layout and Design (CSS & HTML)”