Help with aligning menu

HTML & CSS
1

URL: http://tinyurl.com/29wlcbb

Hello!

I need some help with aligning this menu. I have it looking good in all browsers on my computer, but my client told me it’s all messed up on his. I took a look via BrowserCam and I definitely see what he’s talking about.

Here is what it should look like:

I can’t see how to fix it. Help?

2

Hi,

Why don’t you just set a width and margin;auto and it will match the rest.

Remember to remove the default padding and margin from the ul though.
e.g.


ul#nav {
clear:both;
list-style:none outside none;
[B]margin:auto;[/B]
[B]padding:0;[/B]
position:relative;
[B]width:990px;[/B]
z-index:100;


}

That seems to work for me :slight_smile:

3

Paul, thank you so much! It looks good so far. I’m ordering some screenshots on BrowserCam to be sure. What OS are you using? My client is on a Mac while I’m on Vista/Windows.

4

I’m using xp at the moment and on a quick view it looks ok in Firefox 3.6 safari 5, and IE7/8.

5

http://www.browsercam.com/public.aspx?proj_id=532837

Here are some screenshots of IE and I’m noticing that the logo and order online button are not displaying correctly in IE 7. Do you notice it on your computer? They appear to be too low.

6

Hi,

Yes I can see the online button is overlapping and seems to be because of the header height you set.

Remove the height from the header and see what happens.


#header {
    position: relative;
    width: 1002px; 
 [B]   height: auto;[/B]
    margin: 0 auto;
    padding: 0;
    z-index: 200;
    }
7

For IE6 you would need to float the list item in the nav also otherwise it will drop to two lines.


ul#nav li { display: inline;float:left }
8

Paul, I cannot thank you enough! Looks good now except for the transparency issue in IE 6. I may or may not address that.

Thanks again!