Nav list-item issue on ie8

I'm having an issue with my rounded navigation, the first list item appears to have a huge gap on the right.

I have a list of links inside an UL each have their own class so I could set a background icon to them. Now the first link has a background with rounded corners.

I used relative to push to left so it would have that r开发者_开发百科ounded effect for the hover and active states on the homepage and hover for when i'm on other pages.

Now it all works fine in new browsers apart from IE8 and probably older versions.

I've put it on JSFiddle to make it easier to view. Sorry for the unnecessary CSS properties.

http://jsfiddle.net/datastream/Gta3h/2/

Thanks.

Here's my best guess at what's going on.

You said:

Havent added any doctype or anything its just strictly html and css

If you haven't added a doctype, then IE will be in Quirks mode - this is bad.

Just saw your comment: so apparently the answer was to add a doctype to bring IE out of Quirks mode.