IE Bug with CSS?

I can't work out why the layout of 2 pages in my site are broken in IE 7/8 whe开发者_开发问答n the rest of the site works fine. It's all chunked up into templates from the CMS so it's bringing the same NAV etc into all the pages.

THIS IS WHAT IT SHOULD LOOK LIKE

http://test.clothesaid.co.uk/collection-protection/

BUT THESE 2 PAGES ARE BROKEN IN IE7/IE8

http://test.clothesaid.co.uk/media_centre

http://test.clothesaid.co.uk/jobs

HTML is valid apart from the

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

But it always chokes on that. CSS is valid apart from some CSS3 values. No JS erros in the FireBug console.

I've run out of ideas, any help would be amazing

The two pages are rendering in Quirk mode by default in IE. If you look at the source code of the two pages, the first line is

<!-- jobs/index -->

If you take that out, the page will be rendering in Standard mode again.

Check this out, from another answer: Using "margin: 0 auto;" in Internet Explorer 8

Starting with your second question: “margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent. Usually, they get to be the same. That is why text in the example below is not centered.

When you add the width of the element, the borders, and the padding, it should be breaking this constraint. Note that it seems to be a strictly less-than constraint.

906 - width
 40 - padding-left
 40 - padding-right
  2 - border-left
  2 - border-right
---
990

That said, I have no idea why this is NOT effecting the "working" page...