SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Pittsburgh
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doctype messing up my stylesheets

    Hello,

    I'm working on a site redesign. Much of the work has been completed without a doctype in the pages. When I add a doctype it causes certain tags to be centered (img, h2). If I remove the doctype statement then the pages look as I intend.

    Any ideas what I should look for or add to the stylesheet to correct this?

    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which doctype are you using and which browsers are you testing in?

    ETA: I'm just asking because some browsers like to do this funky thing called doctype switching where some doctypes get rendered in quirks mode, and others are rendered in almost standards mode, and others into standards mode. It's messy.

    Zeldman's book Designing with Web Standards has a chapter on it.


    But yeah, it kinda helps us to know what you're working with.
    Last edited by CRA; Aug 5, 2003 at 01:36.

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could we have a look at your source code, or a link to a live page ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Pittsburgh
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doctype messing up my stylesheets

    Hello,

    I'm using Internet Explorer 6 for testing.

    These doctypes give me the strange results:

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

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

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Using this doctype or none at all provides the results I am looking for.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

    Thanks

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, modern browsers do this funky thing called doctype switching and how they render your page depends on what doctype you use.

    html 4 strict , xhtml 1.0 strict and xhtml 1.1 send the modern browsers into standards mode. This is assuming you don't have any images as space holders (so all images are inline) and that you use no tables to lay out your page.

    The transitional doctypes will send some browsers into standards mode, and others into quirks mode. Depends, you just gotta know the browser.

    Using the html 3 doctype (and without full url) will send the browser into quirks mode. The browser then assumes you're using old-school techniques and will render your page the same way an older browser would.

    As for IE 6, even with a valid doctype, putting anything (like a comment or an xml prolog) above the doctype will put the browser back into quirks mode.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The trouble with putting the doctype in afterwards is that you almost certainly will design in quirks mode and take advantage of quirks mode because that is what you are seeing.

    If you put the doctype in your page first before you code, you will immediately see whether something is centred or not and fix it straight away. Otherwise you will have to go all through and change every inconsistency.

    This is not the fault of the doctypes they are just doing their job. If you want to use a doctype then make sure its the first thing you put on the page and save yourself a lot of trouble in the long run. (It's not much harder than not using a doctype.)

    Paul

  7. #7
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Pittsburgh
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Thanks for the help. I went out and got Zeldman's book as suggested.

    Thanks

  8. #8
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question,

    I have been programming using xhtml transistional doctype and css-p, if i switch to xhtml strict will i not have to deal with the bugs/workarounds that browsers give me.
    Aaron Smith
    smithaaronlee.net

  9. #9
    SitePoint Member
    Join Date
    Jul 2003
    Location
    California
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that's right.

    You shouldn't have any problems switching from XHTML transitional to XHTML strict as long as you don't have any presentational HTML in your code.


    As always, it's a good idea to put in the doctype BEFORE you start working.

  10. #10
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is my question. I program in XHMTL transitional with css-p and there are usually some bugs that i have to fix in the css because of the way different browsers render. Well, if i switch to XHMLT strict. Will there no longer be bugs with the different browsers, thus not having to fix display bugs in css for certain browsers
    Aaron Smith
    smithaaronlee.net

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No the same css bugs will remain and you will still have to work around them. (There are probably some extra bugs with strict but nothing that stop you using it.)

    The main difference with strict is that you have to use only those html elements that are allowed which excludes presentational elements in your markup (& other deprecated elements etc).

    The css workarounds for the broken box model (and browser differences etc) will still have to be employed as usual.

    Paul

  12. #12
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one side effect of working in strict is that IE6 will apply the correct (i.e. as per W3C definition) box model, meaning that you won't have to use any box model hacks to get a consistent layout (at least as far as width/padding/margin goes) between IE6 and other compliant browsers...however, IE5.x will still apply the faulty box model...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Redux,

    I think IE6 only goes into quirks mode if you use the html transitional doctypes without the URI. I believe all versions of xhtml are in standards mode unless of course you add the xml prologue then they revert to quirks mode again.

    there's a list here on Eric Meyers site that is quite useful to know:

    http://www.ericmeyeroncss.com/bonus/render-mode.html

    (off topic) One thing that I haven't seen documented is that if you use Ie6 in quirks mode it seems to use the broken box model. If you then use the standard (tantek) box model hack it doesn't work because ie6 understands voice family and feeds itself back the wrong size. Which is why I make sure the browser isn't in quirks mode.

    Am I correct in my assumptions?

    Paul

  14. #14
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Pittsburgh
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I found the answer to my problem in the "Designing with Web Standards" book by Zeldman.

    On page 246 under the heading of "The Heartache of Left-Align" it seems that there is a bug in IE/6 that causes some content to be centered.

    Upon examination of my css file I found that if I added a text-align: left property to the affected selectors that this cured the centered text problem I was getting when placing a doctype in my template.

    Thanks


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
  •