Drop down menu is overlapping the pro buttons...

[LikeGod04]

It was brought to my attention today that my menu doesn’t work on all browsers (looked perfect on my computer before I tried to fix it). It is suppose to center below my banner on one row. On my clients computer it is in two rows, and moves whenever the mouse hovers over one of the drop downs and some of the links are non clickable. Think I might have fixed that, now the menu overlaps my name or the pro buttons. I have tried everything I can think of to fix it. Please tell me what I have done wrong. Website: www.goodwinportraits.com

[Allen]

It was brought to my attention today that my menu doesn’t work on all browsers (looked perfect on my computer before I tried to fix it). It is suppose to center below my banner on one row. On my clients computer it is in two rows, and moves whenever the mouse hovers over one of the drop downs and some of the links are non clickable. Think I might have fixed that, now the menu overlaps my name or the pro buttons. I have tried everything I can think of to fix it. Please tell me what I have done wrong. Website: www.goodwinportraits.com (http://www.goodwinportraits.com)
Try editing this rule like this.

.menu {
position: relative;
display: block;
z-index: 100;
padding: 0; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 570px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto 20px; /* this should center navbar, if not tweak with left's below */
}

[LikeGod04]

Try editing this rule like this.

.menu {
position: relative;
display: block;
z-index: 100;
padding: 0; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 570px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto 20px; /* this should center navbar, if not tweak with left's below */
}


Thank you for the suggestion! I applied the changes, which solved the overlap problem but now I can’t get it centered on the page. When it's centered on my computer it is too far left on my phones browser and my friend’s computer. any other ideas?
I am getting frustrated...think I need to step away from it for tonight. Something that I thought would be a quick fix has turned into 5 hours and counting.

[Allen]

Thank you for the suggestion! I applied the changes, which solved the overlap problem but now I can’t get it centered on the page. When it's centered on my computer it is too far left on my phones browser and my friend’s computer. any other ideas?
I am getting frustrated...think I need to step away from it for tonight. Something that I thought would be a quick fix has turned into 5 hours and counting.
This is what happens when you edit and not copy and paste the whole rule in. Typos in red.

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 100;
padding: 0; /* spacing around menu - top right bottom left */
height: 15px; /* menu container (div .menu) */
width: 570px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto 20px; /* this should center navbar, if not tweak with left's below */
}

[LikeGod04]

It’s always a small typo...LOL I figured that was the problem. It looks like that worked; I will have to have my friend check to see if it works on his computer. Thanks for the help, I really appreciate it.

[LikeGod04]

I figured out what the difference is with my friend’s computer and mine. They use MSN to browse the internet and I use Internet Explorer. Everything works great on internet explorer but on MSN the menu is vertical. How do I fix that?