As you can see the unordered list is fine and in the middle of the main content but once the IE compatibility view button is pressed the list is not styled and it moves way over to the left.
Can anyone indicate as to where I have gone wrong please?
I have tried editing the relevant style sheet e.g. adjust margin and padding, but it doesn’t reflect the changes.
Where you went wrong was to press the compatibility button. You are only meant to do that for antiquated web sites where the CSS doesn’t work properly in modern browsers.
It’s something to do with that matrix filter as it seems to be corrupting the code. Get rid of it and re-test.
You shouldn’t have all those css files as that makes maintenance (and debugging) a nightmare. You should have one main css file and then only have the differences in the IE only file. For a page that size there would hardly be any need for any specific hacks.
Also don’t overdo the absolute positioning as its too rigid. It’s ok in small doses but generally a bad idea (as are fixed heights for content.)