IE Bug with CSS?

Question

I can't work out why the layout of 2 pages in my site are broken in IE 7/8 when 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

You need to be specific about what is "broken". How are we supposed to know what your page is supposed to look like? — Richard H, Mar 18 '11 at 13:34
@Richard I agree in principle, but it's fairly easy to see what is broken in IE8 — Pekka, Mar 18 '11 at 13:37
Agreed, I don't think voting my question down was very fair. I've now edited it so it should be more clear. — Yammi, Mar 18 '11 at 13:37
I don't think changing my title was very helpful either, I don't presume it is a CSS bug. — Yammi, Mar 18 '11 at 13:46

score 1 · Accepted Answer · answered Mar 18 '11 at 13:49

1

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.

answered Mar 18 '11 at 13:49

Thomas Li

3,358
18
14

Good spot! Not sure why that line got into that template! Thanks so much – Yammi Mar 18 '11 at 14:03
Good sleuthing! I didn't notice because Firebug doesn't display comments! – jdmichal Mar 18 '11 at 14:07

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

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...

edited May 23 '17 at 11:47

Community

1
1

answered Mar 18 '11 at 13:47

jdmichal

10,984
4
43
42

Thank you for the reply. But surely that would then break every page if it was a CSS problem? – Yammi Mar 18 '11 at 13:49
@Yammi Yea I just edited to include that. I would still try dropping the width a pixel or two on the main content div and see if that suddenly fixes it. This is certainly a stumper! – jdmichal Mar 18 '11 at 13:51
@Yammi I just thought... IE also has a habit of expanding container widths to accommodate children content. This could be working to expand the content div without any warning. – jdmichal Mar 18 '11 at 14:05

IE Bug with CSS?

2 Answers2