strict/transitional Q's

Discussion in 'HTML' started by mark | r, May 10, 2004.

  1. mark | r

    mark | r Guest

    is there a way to get xhtml script doc type to act like transitional in
    relation to line height, it doesnt matter whats in a DIV strict gives the
    div a line height which knocks out my design and stops it from lookin good.

    mark
     
    mark | r, May 10, 2004
    #1
    1. Advertising

  2. "mark | r" <> wrote:

    > is there a way to get xhtml script doc type to act like transitional
    > in relation to line height, it doesnt matter whats in a DIV strict
    > gives the div a line height which knocks out my design and stops it
    > from lookin good.


    In future, please write normal English using mixed case and full stops
    (".") between sentences. Also consider explaining the problem you have,
    and illustrating it with a URL, instead of a confused explanation of your
    assumed solution to an unspecified problem.

    What do you mean by "xhtml script doc type", and why are you using XHTML?

    If variations in line height break your design, then your design is
    broken by design. You need to give more information in order to get help
    in seeing what is wrong with your design. Actually, it's hardly the line
    height, but that remains to be seen.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, May 10, 2004
    #2
    1. Advertising

  3. mark | r

    Steve Pugh Guest

    "mark | r" <> wrote:

    >is there a way to get xhtml script doc type to act like transitional in
    >relation to line height, it doesnt matter whats in a DIV strict gives the
    >div a line height which knocks out my design and stops it from lookin good.


    Browsers don't care about strict or transitional. Some doctypes
    trigger standards mode and some doctypes trigger quirks mode, it is by
    no means as simple as transitional doctype = quirks mode.

    That said there are no XHTML 1.0 Strict doctypes that trigger quirks
    mode in Mozilla or Opera 7.1+. IE6 and Opera 7.0x can be sent into
    quirks mode by including an XML declaration before the doctype.

    Which browsers are displaying different line height properties in
    different modes? (As ever a URL helps).
    Are you talking about the way that Mozilla includes extra space below
    an image? This can often be resolved with CSS.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 10, 2004
    #3
  4. mark | r

    Whitecrest Guest

    In article <Xns94E5836941CABjkorpelacstutfi@193.229.0.31>,
    says...
    > If variations in line height break your design, then your design is
    > broken by design.


    Bullshit. Trying to stick with the (non standard) standards is breaking
    the design. Which is why the current standards suck. They are what is
    broke.

    If your design is unachievable by using Strict, or xhtml, then use
    transitional. There is no sin in doing that. And it will work on all
    browsers for the foreseeable future.

    --
    Whitecrest Entertainment
    www.whitecrestent.com
     
    Whitecrest, May 10, 2004
    #4
  5. mark | r

    GeoffC Guest

    On Mon, 10 May 2004 11:05:02 +0100, Steve Pugh <> wrote:

    >"mark | r" <> wrote:
    >

    <snip>
    >Which browsers are displaying different line height properties in
    >different modes? (As ever a URL helps).
    >Are you talking about the way that Mozilla includes extra space below
    >an image? This can often be resolved with CSS.
    >
    > Steve


    Can you explain about this extra space included by Mozilla and how to
    overcome it?. It may well be the cause of a problem I am having when
    the doctype is HTML 4.01 but not when Transitional is inserted.

    I have a vertical set of absolutely positioned links which are images
    only, no text at all. When I resize text in Moz, the images move down
    a bit but the background images behind them stay where they are. I
    have tried padding 0, margin 0, border 0 etc. but to no avail.

    Regards

    -- GeoffC
     
    GeoffC, May 10, 2004
    #5
  6. mark | r

    GeoffC Guest

    On Mon, 10 May 2004 11:49:57 +0100, GeoffC <>
    wrote:

    Forgot to mention that I even set the line height explicitly to the
    image height in pixels but even that made no difference. Problem
    doesn't occur in Opera or IE 6.
    Regards

    -- GeoffC
     
    GeoffC, May 10, 2004
    #6
  7. mark | r

    Spartanicus Guest

    GeoffC <> wrote:

    >>Which browsers are displaying different line height properties in
    >>different modes? (As ever a URL helps).
    >>Are you talking about the way that Mozilla includes extra space below
    >>an image? This can often be resolved with CSS.
    >>
    >> Steve

    >
    >Can you explain about this extra space included by Mozilla and how to
    >overcome it?


    img{vertical-align:text-bottom} IIRC

    --
    Spartanicus
     
    Spartanicus, May 10, 2004
    #7
  8. mark | r

    Steve Pugh Guest

    GeoffC <> wrote:

    >>Which browsers are displaying different line height properties in
    >>different modes? (As ever a URL helps).
    >>Are you talking about the way that Mozilla includes extra space below
    >>an image? This can often be resolved with CSS.

    >
    >Can you explain about this extra space included by Mozilla and how to
    >overcome it?. It may well be the cause of a problem I am having when
    >the doctype is HTML 4.01 but not when Transitional is inserted.


    Typically it will show up with something like this:
    <div style="border:1px solid; padding: 0;"><img alt=""
    src="foo.gif"></div>

    In Standards mode, if the image is smaller than the line height then
    space will appear above and below the image. If the image is taller
    than the line height then space will appear below the image.

    Setting display: block; for the relevant img elements is one possible
    CSS solution.

    See this message (and the rest of the thread) for the gory details of
    why this happens:
    http://groups.google.com/groups?selm=

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 10, 2004
    #8
  9. mark | r

    Steve Pugh Guest

    Spartanicus <> wrote:
    >GeoffC <> wrote:
    >> Steve Pugh <> wrote:
    >>>
    >>>Are you talking about the way that Mozilla includes extra space below
    >>>an image? This can often be resolved with CSS.
    >>>

    >>
    >>Can you explain about this extra space included by Mozilla and how to
    >>overcome it?

    >
    >img{vertical-align:text-bottom} IIRC


    Works if the image is taller than the line height. If the image is
    smaller than the line height then it just makes all the white space
    appear above the image, rather than some above and some below.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 10, 2004
    #9
  10. mark | r

    Steve Pugh Guest

    GeoffC <> wrote:

    >Forgot to mention that I even set the line height explicitly to the
    >image height in pixels but even that made no difference.


    The height of line boxes is not determined by the line-height
    property.
    The line-height property of the parent determines the minimum height
    of the line box.
    The actual height is determined by the heights of the various inline
    boxes that make up the line box.

    Then you have the fact that the image sits on the text baseline and
    thus the actual height of the line box is from the top of the image or
    the font (even when no text is actually present) whichever is taller
    to the bottom of the font.

    So you would need to:
    * set the line-height of the parent element to the height of the image
    (or less but safer to make it equal);
    * and set the font-size to the height of the image (or less);
    * and set the vertical-align property of the images themselves as
    outlined in Spartanicus's post.

    Or make the images block elements, in which case there will be no line
    boxes as there are no inline elements, and thus no problem.

    >Problem doesn't occur in Opera or IE 6.


    Opera and IE don't apply this part of CSS 2.1 and CSS 2 was rather
    more vague on this topic.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 10, 2004
    #10
  11. mark | r

    GeoffC Guest

    Steve,

    Thank you for that detailed reply and the link - very illuminating.

    I'll have another go at the problem now.
    Regards

    -- GeoffC
     
    GeoffC, May 10, 2004
    #11
  12. mark | r

    Spartanicus Guest

    Steve Pugh <> wrote:

    >>>Can you explain about this extra space included by Mozilla and how to
    >>>overcome it?

    >>
    >>img{vertical-align:text-bottom} IIRC

    >
    >Works if the image is taller than the line height. If the image is
    >smaller than the line height then it just makes all the white space
    >appear above the image, rather than some above and some below.


    Indeed, and since the image is usually larger than the line-height, this
    is the behaviour most want.

    --
    Spartanicus
     
    Spartanicus, May 10, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dave Winter
    Replies:
    16
    Views:
    1,150
    Steve Pugh
    Apr 27, 2004
  2. Sally Thompson
    Replies:
    10
    Views:
    6,213
    Sally Thompson
    Jun 26, 2004
  3. t
    Replies:
    76
    Views:
    1,775
    Neredbojias
    Feb 23, 2008
  4. BessieBee

    HTML transitional vs strict

    BessieBee, Apr 10, 2008, in forum: HTML
    Replies:
    3
    Views:
    644
    Jukka K. Korpela
    Apr 10, 2008
  5. Beauregard T. Shagnasty

    Re: Converting transitional to strict

    Beauregard T. Shagnasty, May 16, 2010, in forum: HTML
    Replies:
    3
    Views:
    533
    Jukka K. Korpela
    May 17, 2010
Loading...

Share This Page