CSS navigation bar: spacing issue

Question

for some unknown reason, my navigation bar is shifted over to the right, on Firefox and also on Chrome. See https://i.stack.imgur.com/dskZy.png

And what's weird is that the issue doesn't arise on jsfiddle. See http://jsfiddle.net/bMAGX/

Any ideas? Thanks.

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

Are you using a CSS Reset? I'm guessing not. You should consider using one to help with issues like this.

I think you need this CSS to remove the default ul margin/padding:

#topmenu ul {
    margin: 0;
    padding: 0
}

edited May 23 '17 at 11:47

Community

answered Feb 22 '11 at 14:33

thirtydot

1

@Dave2 ... And jsfiddle actually uses a CSS reset on their site, which is why you didn't see it there. – mercator Feb 22 '11 at 14:48
@mercator: Good to spell that out, I should have included it in my answer. – thirtydot Feb 22 '11 at 14:58

score 0 · Answer 2 · answered Feb 22 '11 at 14:32

0

Perhaps because your DOCTYPE is malformed.

<!DOCTYPE html> should be one of the types defined here.

answered Feb 22 '11 at 14:32

adarshr

3

*Not my downvote*, but your answer is simply wrong. There's no problem with ` `. – thirtydot Feb 22 '11 at 14:35
Good to know. I just discovered that this is a HTML 5 standard! Thanks :) – adarshr Feb 22 '11 at 14:36
But do the current versions of Chrome and Firefox support HTML 5 yet? – adarshr Feb 22 '11 at 14:37
"All browsers" (IE 6/7/8/9, Firefox, Chrome, Safari, Opera) support (will go into Standards Mode with) the HTML5 doctype. See: http://hsivonen.iki.fi/doctype/ – thirtydot Feb 22 '11 at 14:57

score 0 · Answer 3 · answered Feb 22 '11 at 14:37

0

You can add this to top of your CSS:

* { padding: 0; margin: 0;}

answered Feb 22 '11 at 14:37

TNC

It's best to avoid the star selector if possible. Here, it's possible to use a CSS Reset instead of that. See: http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful – thirtydot Feb 22 '11 at 14:40

3 Answers3