I have a footer menu which should be centered horizontally on the screen with the elements inside then centered horizontally within the footer container (see image below). This works fine in all browsers apart from IE7 (which is the lowest version of IE we wish to support). I cannot understand why this is not working. I have reproduced the code here in this fiddle however the fiddle also seems to align it incorrectly (so I can provide a link to the site if needs be):
http://jsfiddle.net/jezzipin/tz5Ym/
Does anyone have any clues as to why this is not working in IE7? Do I need to perform an IE7 specific hack?
Before anyone else states the obvious:
- Yes , I’m already using margin:auto for horizontal margins.
-
Yes, I’ve declared my Doctype
jme1988
Correct Display:
IE7 Display:
Padding doesn’t seem to work on non-block elements so I had to use:
to force IE7 to accept the styling.