Forum Moderators: open

Message Too Old, No Replies

Layout lose format when I add this DocType

         

smagdy

7:43 pm on Jun 8, 2005 (gmt 0)

10+ Year Member



Layout change and some fonts change when I add this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or

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

so why is that?

and are these a must?

Thanks in advance

MatthewHSE

8:31 pm on Jun 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



so why is that?

Because it's rendering in standards-compliance mode, which can change a lot of things. However, it is easier to code for standards mode and you get more reliable cross-browser rendering.

and are these a must?

I consider them so, for the reasons mentioned above (and a few others, such as validation).

It should also be noted that a single-line doctype like you show isn't correct. They should be split onto two lines, like shown here [w3.org]. As far as I know, using a doctype exactly in the way recommended by the W3C is the only way to get some browsers into full standards mode (I could be wrong on that).

I suggest you choose a doctype based on how strictly you want to write code, and stick with it, validating at least a few pages until you get used to it. You'll write cleaner, leaner, more cross-browser code, and those nice "Validated" pages are so pretty! ;)

asquithea

1:39 pm on Jun 9, 2005 (gmt 0)

10+ Year Member



It should also be noted that a single-line doctype like you show isn't correct. They should be split onto two lines, like shown here. As far as I know, using a doctype exactly in the way recommended by the W3C is the only way to get some browsers into full standards mode (I could be wrong on that).

I think you are wrong on that. The parser normalizes whitespace, so it makes absolutely no difference whether or not you split it over multiple lines.

However, it's correct to say that most if not all browsers use the presence of a DOCTYPE to select their rendering mode. Note that IE6 will revert to quirks mode if an xml prologue is present before the DOCTYPE.

encyclo

1:39 pm on Jun 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You might find this thread useful:

  • Quirks Mode vs. Standards Mode [webmasterworld.com]

    It explains why you are having problems when you add the doctype.

    a single-line doctype like you show isn't correct

    In fact they are only shown like that to keep the page formatting straight on the w3.org site. ;) You can have your doctype on one or two lines (whatever you prefer). Just don't add arbitrary line-breaks except to replace spaces just to be safe.

    added: beaten to it by asquithea ;)

  • smagdy

    4:15 pm on Jun 9, 2005 (gmt 0)

    10+ Year Member



    Thanks everybody

    I tried them all and this is the only one that worked well (Didn't change my layout format)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

    so is that good?

    tedster

    4:39 pm on Jun 9, 2005 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    Is that good?

    That depends what you mean by "good". It means there are elements in your html that are already long gone from the W3C recommendations -- so you need to use an "antique" DTD to have it render properly. But the good news is that you still can get your page to display the way you want, at least for now.

    I would suggest you keep reading and learning so after you learn more you can upgrade your mark-up to contemporary standards. You'll be very glad you did, I think, because all your web development will be smoother and faster once you gain this working knowledge.

    encyclo

    5:23 pm on Jun 9, 2005 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    Try this one (not on the list):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    You should see that it doesn't break your layout and it is better than the ancient 3.2 doctype you have previously chosen. The next step after that is validation: head on over to the HTML validator [validator.w3.org] and see what errors and warnings come up. If there are a lot, work through them one by one from the top, and you'll usually find that later ones disappear as earlier errors are corrected.

    Once you've got everything validated, then you can start looking at moving from quirks mode (which you get with the above doctype) to standards-compliance mode, which is more suitable for newer browsers.

    smagdy

    7:31 pm on Jun 9, 2005 (gmt 0)

    10+ Year Member



    Ok, thanks a lot a lot

    I just validated a page and it said

    "This Page Is Valid HTML 4.01 Transitional!"

    after it had 27 errors

    so last question.. do i better try to validate it to be "strict" or even better "XHTML"?

    or HTML 4.01 Transitional is fine for old & new browsers?

    Thanks again

    encyclo

    7:53 pm on Jun 9, 2005 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    If you are building a site with tables for layout, then validating to HTML 4.01 Transitional is ideal. If you are going to move towards table-less layouts with CSS then you should aim to validate to a strict doctype. The advantage with a strict doctype is that you need to remove presentational markup and replace it with CSS, which makes for cleaner pages. As for XHTML, there are many who prefer the syntax, but it offers no real benefits over HTML.

    newseed

    4:41 pm on Jun 18, 2005 (gmt 0)

    10+ Year Member



    Can anyone direct me to a web site that has a good example of a tableless web site using CSS?

    Thanks.

    asquithea

    5:43 pm on Jun 18, 2005 (gmt 0)

    10+ Year Member



    Depends on what you mean by "good". CSS 2.1 is not a good tool for replicating a table-based design, so if you've already got a design in mind, you're most likely in for a lot of grief.

    If, on the other hand, you're open to new layout ideas, and are prepared to relinquish pixel-perfect page layout in return for elegance, beauty, and flexibility, then the CSS Zen Garden [csszengarden.com] is probably the canonical web-site.

    For a more bleeding-edge-technique-oriented approach, and some more links, try css/edge [meyerweb.com].

    newseed

    9:17 pm on Jun 18, 2005 (gmt 0)

    10+ Year Member



    The info (links) you gave is quite helpful indeed!

    Thanks!

    collymellon

    2:39 pm on Jun 20, 2005 (gmt 0)

    10+ Year Member



    "Can anyone direct me to a web site that has a good example of a tableless web site using CSS?"

    If your still looking go to my profile and the link is there, not a table in sight :)

    smagdy

    3:20 pm on Jun 20, 2005 (gmt 0)

    10+ Year Member



    I went to ur profile and didnt find it?

    what is its name?

    mattglet

    9:30 pm on Jun 20, 2005 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    If your still looking go to my profile and the link is there, not a table in sight :)

    Not a table in sight, but it's absolutely horrible in Opera :)

    dutch_dude

    1:57 am on Jun 21, 2005 (gmt 0)

    10+ Year Member



    Not a table in sight, but it's absolutely horrible in Opera

    And Firefox and Safari. Haven't looked at it very well but your site probably depends on the <IE6 and IE6 in quircksmode boxmodel.

    I also see some evil font tags although they will not cause this problem.

    Farix

    12:39 pm on Jun 21, 2005 (gmt 0)

    10+ Year Member



    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    Well that explains why it goes into quirks mode. The DocType has to be on the very first line in order to force IE6 into standards mode. Take the XML declaration out and all the browsers will behave with the same box model.