Page only works correctly when IE9 set to quirks or IE7 standards mode

First off, it’s not a page I have any control over, though I’m looking to influence its creator. It’s an internal company page, so I can’t share either a URL or a screenshot unfortunately.

At the moment, the main thing that seems to happen, is that when anything other than quirks or IE7 standards mode is selected in the browser (we use IE9 here currently), the padding/margins, around the side menu areas in particular collapses, leaving everything cramped up.

At the moment, the following DTD is used on the document, but I’m not wholly clear whether that in itself would have an impact. After that, I’m assuming that something else in the CSS needs some close scrutiny. Can anyone suggest what I might look for?

It’s worth adding, that if viewed in anything other than IE, the page pretty much falls to pieces altogether.

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->

Feel free to ask additional questions.

I would question the comment-like syntax around the doctype. It should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It’s also a bit of an old doctype.

I did recognise it was getting a bit old. What I didn’t immediately pick up on was the ‘comment’ style syntax. I’m assuming that, as this is never going to be viewed on anything less than IE9, it could be amended to the HTML5 DTD, thus…

<!DOCTYPE html>

My understanding of that though, is that this just opens up the use of HTML5 elements and their attributes. It shouldn’t do much if anything for the layout peculiarities.

You can use newer elements with or without that docutype, as long as the browser recognizes them (and even if it doesn’t, most browsers will let you use newer elements, though they will need extra style like display: block;).

Having a doctype (of any flavor) really just stops the browser from jumping into quirks mode. All an older doctype indicates is that the page might be quite old, or that the author is employing old practices.

That much is assured…

One thing we did just work out was that it’s the browser commenting out the DTD when set to IE7 standards mode. If switched to IE9 standards, it’s no longer commented out, but the layout breaks of course. More digging to do I think.

If you can’t work it out, you could make up a demo that shows the problem and create a Pen.

That would suggest that the logic of the page is incorrect and stricter browsers will not try and fix the errors. It looks as though you have triggered compatibility mode in IE (which is not quite the same as quirks mode) but more like IE7 with differences. Older versions of IE used to try and fix errors and not obey the rules the author had set and would often make things fit when they shouldn’t.

From your description you should be looking at the widths you have set and see if combined with padding and margins they are too big for their containers.

If you don;t have a doctype at all then you will trigger the old box model in IE where padding and borders are included in the width and not outside it. These days you can select that box model anyway as a lot of authors do now).

Without code to work on the above is just guessing :smile:

Everything you just said makes perfect sense against what I’m seeing - I’ve saved a copy of the web page that looks worst and I’ll have a hack at home later, where I have a better set of tools to see what’s going on (like something that nests things properly). I can only get at the IE7 dev tools here, which are better than nothing, but still a bit limited.

Well I think I understand the source of the problem now - the side menu is built out of a table. There are lots of small margins on various things, but no padding to be seen anywhere. It looks like IE7 mode is putting some sort of default on things, but once you move up to IE8+, those defaults are no longer provided, and the whole thing collapses in on itself. Work to be done here I think…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.