SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strict Doctype changing Firefox Display

    I noticed an anomaly in the way a table displayed in Firefox. I finally troubleshot it down to the strict doctype:


    <!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">

    When my pages are using the above, the top table seems to have padding or margins or something off kilter for background images. See the banner for this page in Firefox:


    If I take that banner and use an older, transitional doctype:

    <!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">

    It looks normal.

    http://www.ncmoves.com/template/nc-move/test6.html

    Does anybody have any insight into how I can work around this?

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With a Transitional doctype, Firefox – like Opera and Safari – uses an "almost standards mode" rather than the "standards mode" that goes with a complete Strict doctype.

    The difference is how replaced inline elements (like images) align vertically in table cells. In "almost standards mode", the old, incorrect alignment is used. In "standards" mode, the correct, compliant alignment is used.

    The correct alignment is baseline, which means the bottom margin edge of the image should be aligned with the text baseline of the cell (even if there is no text!). That will leave a gap of a few pixels to the bottom of the cell, where the descenders of lowercase characters are supposed to go.

    There are several ways to work around this. The most common seems to be to set,
    Code CSS:
    td img {display:block}

    Another option is to correct the actual problem:
    Code CSS:
    td img {vertical-align:bottom}

    Note: if you were to serve the document as XHTML instead of HTML, you'd see the same thing with a Transitional doctype, since "standards mode" is always used for XML MIME types.
    (So much for pretend-XHTML being harmless. )
    Birnam wood is come to Dunsinane


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
  •