Navigation not lining up properly... much praise to anyone who can help!

HTML & CSS
1

Hi!

I’ve put my test site up at http://bit.ly/1lDBRuF …

Please can anyone tell me why either of my two problems are happening?:

  1. The navigation menu is shifted slightly right of center but I can’t work out why!

  2. In Chrome (but not Firefox) the border doesn’t appear under the menu buttons until it is clicked (rather than on hover - as it does in firefox)

Your help will be much appreciated. This is my first return to coding in years and I’m finding it harder than I thought I would!

Cheers!

2

Hi maffp.

  1. The navigation menu is shifted slightly right of center but I can’t work out why!

One thing you always have to remember is that browsers put default margins/paddings on various elements to give them some default style, so if you don’t want those styles, you have to override them. That’s why many style sheets start with a “reset”. E.g.

 html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

All you need in this instance is

ul {padding: 0;}

to remove the default left padding on the ul.

  1. In Chrome (but not Firefox) the border doesn’t appear under the menu buttons until it is clicked (rather than on hover - as it does in firefox)

There’s an error in your code. Instead of this:

#nav-frame a:link, a:visited { text-decoration:none; border-bottom:11px solid #fff; }
#nav-frame a:active, a:hover { text-decoration:none; border-bottom:11px solid #597137; }

you should have this:

#nav-frame a:link, [COLOR="#FF0000"]#nav-frame[/COLOR] a:visited { text-decoration:none; border-bottom:11px solid #fff; }
#nav-frame a:hover, [COLOR="#FF0000"]#nav-frame[/COLOR] a:active { text-decoration:none; border-bottom:11px solid #597137; }

You need the full declaration after each comma, as nothing is carried across the comma. You can separate a bunch of rules with commas if they all have the same declaration, but you can’t abbreviate them.

Hope that helps. :slight_smile:

3

Ralph, you’re an absolute star! Cheers man, just saved me a lot of messing.

All the best.

4

No worries. Glad to help. :slight_smile: