SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML 4.01 DOCTYPE is breaking my layout in < IE10! Help!

    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?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The doctype you changed it to isn't the current one - that's the one for pages first written using HTML 3.2 that are being transitioned to HTML 4.

    The HTML 4 doctype is:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cAPS lOCK View Post
    ----------------
    (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?
    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.

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    Otherwise all bets are off

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

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that's good info to know. IE 5!? Oh man. This is got to get fixed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •