CSS Menu Centering

[lookingatit]

Hi All,

I'm trying to get a css menu to center in the middle. I've got it working in Firefox and in IE but not at the same time any help before I loose all my hair much apreciated.

This works in firefox

#menuContainer6 {
padding:0 auto;
margin:0 auto;
list-style:none;
width:798px;
height:180px;
position:absolute;
top:0;
background-image: url(boats.jpg) fixed center;
left:0;
right:0;

}

This works in IE

#menuContainer6 {
padding:0 auto;
margin:0 auto;
list-style:none;
width:798px;
height:180px;
position:absolute;
top:0;
background-image: url(boats.jpg) fixed center;
left:0 auto;
right:0 auto;

}

Only difference is the auto on the left and right for IE.

Any Help?

[londrum]

'left' and 'right' are only supposed to take one value, so the auto is probably having no effect anyway. IE is probably disregarding those rules entirely because they are invalid.

the problem might be with the container that the menu is in, rather than the menu itself. is it maybe positioned absolutely? try sticking positon:relative on them both, and making sure that the container the menu is in is strecthing right across the page.

[swa66]

Try a conditional comment, easiest fix for IE needing stuff differently.

Your standards complaint CSS: do validate it
[jigsaw.w3.org...]

The thing IE6 version gets wrong is that it doesn't support setting both left and right of the same element.

An alternative to absolutely position something in the center instead of the invalid syntax is to first set one side to 50%, and then move back the margin by half of the width.

e.g.

  <style type="text/css">
    #menuContainer6 {
      padding:0; /* padding doesn't do auto */
      margin:0 auto;
      list-style:none;
      width:798px;
      height:180px;
      position:absolute;
      top:0;
      background: url(boats.jpg) no-repeat center;
       /* background img only takes the URL, fixed isn't 
          what you are looking for in most cases */
      left:0;
      right:0;
    } 
  </style>
<!--[if IE 6]>
  <style type="text/css">
    /* lack of support for setting both left and right at the same time */
    #menuContainer6 { 
      left: 50%;
      right: auto;
      margin-left: -399px; /* half the width */
    }
  </style>
<![endif]-->

[lookingatit]

Thank you for taking a look, unfortunately these fixes have not worked.

[Limes1]

Hi I have the same situation, I have installed a CSS code in my site and it works fine, but I'd like to center the menu in the web page, it has sub menus too, here is the code that I have, any help on fixing this please?

@charset "UTF-8";
/* CSS Document */

.droplinebar{
overflow: hidden;
}

.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{
display: inline;
}

.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}

.droplinebar ul li a:visited{
color: white;
}

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}

/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
background: #303c76; /*sub menu background color */
visibility: hidden;
}

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}

Thanks

[swa66]

@limes1: since you float your main menu, there's no centering.

Try to rebuild it without floating.

The easiest to center it is to get the first level display:inline , (not floated) and then apply text-align:center on the parent.

The tricky bit is to then get the drop downs working cross-browser.

[Limes1]

Thanks for your reply

The problem is that I copied the code and pasted it into my site and then I just changed the names of the buttons and the links and works fine, I have medium knowledge about HTML but no CSS at all, that's why I'm here. You say that maybe the drop downs will not work properly if the code is changed, I just want the menus to look nicely centered, but if the code change affect the functionality then I will not change it, what do you think? Regards.

[TenTonJim]

It is probably the absolute positioning.

Try assigning it at left:50% (sets left edge to the center of the page) and then applying a negative left margin that is half the width of the div or whatever container you are using...

width:798px;
left:50%;
margin-left:-399px;/*half of 798*/

This should work in all browsers without any conditionals needed.

[edited by: TenTonJim at 1:42 am (utc) on June 27, 2009]