I'm trying to setup a login box on the top header of each page. This sits nicely above some menu tabs.

If I put in any kind of link in the login box it seems to inherit the same background image and colours as the menu tabs.



See the Forgot Password text. That links to a script but it is left justified and has the left rounded corner of the tabs to the left of it. It also has a grey border around it.

What I want is the Forgot Password | Sign Up | Remember Me to be right aligned, grey text, change green on hover.

One other annoying problem is with IE. If I click any input (username or check box) the Login button has a new black border around it. This doesn't happen in FF.

That sounds like a php thing.

I have stripped out all the php stuff to leave the css and html code.

My knowledge of css is basic so I think it's a problem of having a # or a . or a lack of a class / id.

If you cut and paste the above code into test.html you will see the problem.

Give the 'forgot password' link a different class name with the styling you want. Your css specifies ALL link inside the header to display as your tabs and it's doing exactly that with your 'forgot password' link - floated left, with a green background and all the rest.

Lack of a class or id would not have that effect. I'm not sure where it's picking up the border.

Give the 'forgot password' link a different class name with the styling you want

That was a good clue. I added this:

#header a.login {
	float: none;
	background: none;
	border: none;
	text-decoration:none;
}

That did the trick.