I have to add new pages and elements to an old legacy site. I’m not going to be able to edit the “templated” code including the opening DOCTYPE.
Right now it is set at <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
I had been coding and testing with <!DOCTYPE HTML>.
I recently decided to change the DOCTYPE it to the current one (4.01) and continue working. Everything looks fine in all browsers except IE9 and IE8. All of the spacing if off, vertical alignment in form fields and buttons. Width of block elements, heights, padding. I mean it’s all jacked up. The page isn’t even centered any more with a margin: 0 auto; It looks fine in Chrome, FF, etc.
When I make it <!DOCTYPE HTML>, everything is fine in IE. Change it to <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> and it’s all broken in IE 8&9.
What can I do to fix this? I don’t want to adjust things for IE8 and 9 just to break it on another browser. Why is is rendering this way?
I’m not altering the original HTML in any way. I’m building it in a separate html file but using the same DOCTYPE as them for testing. I’m building a new homepage but using their old header and footer.
This is how their current site is set up at the top of the html file
(empty line)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
I think this empty line and/or incorrectly written DOCTYPE is putting the IE browsers in Quirks Mode. I can’t build this way, can I?
I feel like I need to tell them to use the correct 4.01 Transitional DOCTYPE which is <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
The doctype above will trigger quirks mode in IE9 and under and will be a pain to use as you basically lose all the enhancements of this century and throws you back to IE5 in most respects (no child selector, no hover on elements other than anchors and millions of other things). The space above the doctype will not trigger quirks mode but any characters above the doctype will trigger quirks mode in older versions of IE.
If you can’t change the doctype perhaps you could force the issue for ie8+ with the IE edge meta tag.
The page isn’t even centered any more with a margin: 0 auto
That’s because IE5 didn’t understand auto margins and in ie5 you centred an element by adding a parent and then adding text-align:center which perversely centres the child element and not just inline content. This is why you can’t really code in quirks mode unless you are familiar with the thousands of old IE bugs (haslayout, 3 pixel jog,disappearing element and so on…)
