3 replies [Last post]
cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 8 years 51 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Hi all!

I'm a beginner-intermediate CSS guy who's been gaining much confidence in building pure CSS sites. My latest one though, has an odd problem (well, is there any other kind...) the main menu centers in IE6/Windows, but on the Mac it's stuck to the left!

I have done some study of centering issues but am yet to get my head around this, especially since I've encountered some seemingly very different methods of achieving a centered menu.

My site (demo) is here:

http://www.adamabrams.com/spaprofits/

The menu is a modified suckerfish-style... took SO long to get things to this state... I'm afraid to break it! But it really has to be centered.

Here's the CSS:

#navWrapper { text-align: center; width: 795px; margin: 0; /*FROM ORIGINAL */ height: 70px; background-image: url(images/vok_bg_02.jpg); background-repeat: no-repeat; }

/* THE MAIN NAVIGATION and SUBMENU */

#nav {
padding: 0;
margin: 0 auto;
list-style-type: none;
display:table;
width: 795px;
height: 70px;
}

#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
display: block;
}

#nav li {
float: left;
margin: 0 5px; /* add hztl margin to spread them out more */
width: auto;

}

#nav li ul {
margin-top: -7px;
position: absolute;
width: 1000px;
left: -999em;
}

#nav li a {
text-align: center;
display: block;
width: 105px;
height: 45px;
line-height: 45px;
text-decoration: none;
border: none;
color: white;
background: url(images/stone.png) no-repeat left top;
font-size: 12px;
font-weight: bold;
font-family: arial, helvetica, sans-serif;
}

ul#nav li li a, ul#nav li li a:hover {
display: inline;
width: auto;
height: auto;
background: none;
}

ul#nav li a:hover {
background: url(images/stone-over.png) no-repeat left top;
}

Keeping my fingers crossed for a solution!

Thanks!
adam

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 8 years 51 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Incidentally, the same

Incidentally, the same "left-alignment" issue happens in Firefox on PC. So I guess (surprise, surprise!) it's just IE that's the issue here.

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 13 years 29 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

It is quirksmode

#nav { padding: 0; margin: 0 auto; list-style-type: none; display:table; width: 795px; height: 70px; }

Due to the incomplete Doctype, the page is running in Quirksmode. In Quirksmode IE, centering block level elements with "margin: 0 auto" does not work.

Since 'auto' does not apply, IE inserts its default-margin-left of 30pt to the ul, even if you would state "margin: 0 auto !important". (The others have no margin-left, but a padding-left of 40px, which is zeroed in the #nav)

This IE-30pt gives the illusion of a centered navigation. Infact its the default-margin-left. Btw, you cannot really expect to center an element of 795px width inside a parent of the same width, 795px.

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 8 years 51 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

It was indeed the width of

It was indeed the width of 795px on the #nav that was the problem (along with the DTD). Shrinking that number, and adding a stricter Doctype, did the trick! Many thanks. I'm getting the hang of this a little more each day....