SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry XHTML DOCTYPE and CSStress!

    BLARGH!!!

    I'm having issues with some CSS depeding upon what DOCTYPE I've got on my page.

    If I've got,

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

    everything is cool, but if I've got,

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

    or,

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

    it all goes to heck! Well all goes to heck is too strong but what I've got is three cells:
    1. leftCell (sits up on the left side and is 150px wide)
    2. centerCell (starts at 150 and stretches to 550)
    3. rightCell (starts at 550 and is 150px wide)
    All of these are set to have 100% for a height. This is where the problem comes in. With the first DOCTYPE, the cells stretch to the bottom of the screen nicely. Put in an XHTML DOCTYPE and kerblooie!

    I thought it was an issue with XHTML Strict hence I tried the Transitional DOCTYPE and still the same result.

    HELP!

    Keep smiling ...
    It makes people wonder what you're up to ...

  2. #2
    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 first doctype you mentioned (the one without the URI) is a partial doctype and puts some browsers into quirks mode (ie non standards mode). The second two doctypes puts browsers into standards compliance mode.

    The differences you are experiencing are because of the differences associated with these two modes.

    In standards mode you will need to specify a height in the body so that your containers have something to work with.

    Try putting this style declaration in your stylesheet:
    Code:
    html, body {
     height: 100%;
    }
    This may work, but some browsers may interpret 100% as window height and some may interpret it as window height.

    Hope this helps.

    Paul

  3. #3
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    In standards mode you will need to specify a height in the body so that your containers have something to work with.

    Try putting this style declaration in your stylesheet:
    Code:
    html, body {
    height: 100%;
    }
    This may work, but some browsers may interpret 100% as window height and some may interpret it as window height.
    EXCELLENT! That did the trick! I had to put (margin: 0px 0px 0px 0px in my body element so that the cells would sit snug to the bottom and I had to add the (html,) part but BINGO! Worked like a hot d**n!

    Where you said,
    Quote Originally Posted by Paul O'B
    In standards mode you will need to specify a height in the body so that your containers have something to work with.
    is where it clicked for me.

    Thanks!

    Keep smiling ...
    It makes people wonder what you're up to ...

  4. #4
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works in IE 6 and Netscape 7 using @import to ignore the style sheet in Netscape 4.77! That makes me so very happy!

    Thanks again!

    Keep smiling ...
    It makes people wonder what you're up to ...

  5. #5
    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)
    Glad that helped.

    I think you might find that if you have more than a page of content then IE will expand the div to compensate but Mozilla 1.2+ (& probably Netscape 6+) will overflow the div.

    But Hey! you can't have everything otherwise life would be too easy wouldn't it

    Paul

    (PS use margin:0px;padding:0px to keep Opera happy as opera uses padding for its body margins for some reason)

  6. #6
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah ... I've got to spend some time learning the little ins-and-outs of keeping all the other browsers happy. I've just recently started learning about using CSS as my main layout method so much to learn!

    Thanks for the heads up on the padding deal and the other stuff too!

    Keep smiling ...
    It makes people wonder what you're up to ...


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
  •