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?