The site displays as it should in IE10 & 9 but in 7 and 8 the menu is shifted to the left for some reason. The margin-left:auto and margin-right:auto do not seem to work or something is over-riding them, any ideas?
Have a look in the how to
Have a look in the how to section there is a post about centering.
Older IE versions need to use text-align:center; on the container.
If your site is in quirks mode or not in standards mode, then IE treats it like IE6.
There seems to be something
There seems to be something strange going on with my span tag "menu"
You can see the blue outline below.
ie7 mode - width of span is longer than content
ie8 and above - width is the size of the content, but height is bigger
Chrome has the same issue, the height is bigger than content
Are you using something to
Are you using something to help IE7 and 8 understand HTML5 new elements?
Yes I am <!--[if lt IE
Yes I am
<!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- Style sheet for PC computers -->
feed the shiv script to IE<10. IE9 is not supportive of html5.
You can talk with friends, brainstorming on the other hand, you can also check the Internet so the answer a little more authority. I think these are a good way to solve the problem. Good luck to you!