Inline style problem

Discussion in 'HTML' started by KiwiBrian, Aug 29, 2008.

  1. KiwiBrian

    KiwiBrian Guest

    I wish to control the text line-height, and the paragraph vertical spacing,
    of several rows of text on a page irrespective of any styles in an external
    stylesheet that is applied to the page.
    In the following example I have set the margin top and bottom of each
    paragraph to 1px to demonstrate that it doesn't seem to be in control.
    I had thought that this could be accomplished as follows:-

    <div style="FONT-SIZE: 14px; LINE-HEIGHT: 16px; FONT-FAMILY: arial;
    TEXT-ALIGN: left">
    <p style="MARGIN: 1px 0px">Several lines of text e.g. I wish to control the
    text line-height, and the paragraph vertical spacing, of several rows of
    text on a page irrespective of any styles in an external stylesheet that is
    applied to the page.</p>
    <p style="MARGIN: 1px 0px">More lines of text e.g. I wish to control the
    text line-height, and the paragraph vertical spacing, of several rows of
    text on a page irrespective of any styles in an external stylesheet that is
    applied to the page.</p></div>

    Why does the vertical margin not seem to be in control of the vertical
    spacing between consecutive paragraphs but is aparantly overrridden by an
    external style?
    How can I ensure that my inline style is the controlling style on the
    enclosed text?
    KiwiBrian, Aug 29, 2008
    #1
    1. Advertising

  2. KiwiBrian

    dorayme Guest

    In article <g97eh8$rqa$>,
    "KiwiBrian" <> wrote:

    > I wish to control the text line-height,


    So use line-height: 1.5 or whatever you want, don't use units unless you
    know what you are doing thereby. In other words, don't use "em" or "px"
    etc.

    > and the paragraph vertical spacing.



    You perhaps mean the margin top and bottom? Use margin.


    > of several rows of text on a page irrespective of any styles in an external
    > stylesheet that is applied to the page.


    A style that you put in line or in the g=head of the document will
    usually accomplish this.

    > In the following example I have set the margin top and bottom of each
    > paragraph to 1px to demonstrate that it doesn't seem to be in control.


    Well, changing the margin 1px you have to 8px makes it change so that is
    control.


    > I had thought that this could be accomplished as follows:-
    >


    > <div style="FONT-SIZE: 14px; LINE-HEIGHT: 16px; FONT-FAMILY: arial;
    > TEXT-ALIGN: left">
    > <p style="MARGIN: 1px 0px">Several lines of text e.g. I wish to control the
    > text line-height, and the paragraph vertical spacing, of several rows of
    > text on a page irrespective of any styles in an external stylesheet that is
    > applied to the page.</p>
    > <p style="MARGIN: 1px 0px">More lines of text e.g. I wish to control the
    > text line-height, and the paragraph vertical spacing, of several rows of
    > text on a page irrespective of any styles in an external stylesheet that is
    > applied to the page.</p></div>
    >
    > Why does the vertical margin not seem to be in control of the vertical
    > spacing between consecutive paragraphs but is aparantly overrridden by an
    > external style?


    You might have to give a proper URL for us to see what is really going
    on. Without the benefit of access to this controlling external css, it
    is difficult to say.


    > How can I ensure that my inline style is the controlling style on the
    > enclosed text?


    By putting it inline, this usually makes sure. You also need to be
    careful which element you are putting your style on to ensure overiding
    an instruction in an external sheet.

    --
    dorayme
    dorayme, Aug 29, 2008
    #2
    1. Advertising

  3. KiwiBrian

    KiwiBrian Guest

    "dorayme" <> wrote in message
    news:...
    > In article <g97eh8$rqa$>,
    > "KiwiBrian" <> wrote:
    >
    >> I wish to control the text line-height,

    >
    > So use line-height: 1.5 or whatever you want, don't use units unless you
    > know what you are doing thereby. In other words, don't use "em" or "px"
    > etc.
    >
    >> and the paragraph vertical spacing.

    >
    >
    > You perhaps mean the margin top and bottom? Use margin.
    >
    >
    >> of several rows of text on a page irrespective of any styles in an
    >> external
    >> stylesheet that is applied to the page.

    >
    > A style that you put in line or in the g=head of the document will
    > usually accomplish this.
    >
    >> In the following example I have set the margin top and bottom of each
    >> paragraph to 1px to demonstrate that it doesn't seem to be in control.

    >
    > Well, changing the margin 1px you have to 8px makes it change so that is
    > control.
    >
    >
    >> I had thought that this could be accomplished as follows:-
    >>

    >
    >> <div style="FONT-SIZE: 14px; LINE-HEIGHT: 16px; FONT-FAMILY: arial;
    >> TEXT-ALIGN: left">
    >> <p style="MARGIN: 1px 0px">Several lines of text e.g. I wish to control
    >> the
    >> text line-height, and the paragraph vertical spacing, of several rows of
    >> text on a page irrespective of any styles in an external stylesheet that
    >> is
    >> applied to the page.</p>
    >> <p style="MARGIN: 1px 0px">More lines of text e.g. I wish to control the
    >> text line-height, and the paragraph vertical spacing, of several rows of
    >> text on a page irrespective of any styles in an external stylesheet that
    >> is
    >> applied to the page.</p></div>
    >>
    >> Why does the vertical margin not seem to be in control of the vertical
    >> spacing between consecutive paragraphs but is aparantly overrridden by an
    >> external style?

    >
    > You might have to give a proper URL for us to see what is really going
    > on. Without the benefit of access to this controlling external css, it
    > is difficult to say.
    >
    >
    >> How can I ensure that my inline style is the controlling style on the
    >> enclosed text?

    >
    > By putting it inline, this usually makes sure. You also need to be
    > careful which element you are putting your style on to ensure overiding
    > an instruction in an external sheet.


    Thanks for your comments.
    It appears that you are confirming my general understanding on what is
    'normal' behaviour.
    Unfortunately this is in a site being developed in a local XAMPP environment
    of a Zen Cart site so not easy to make available online at this stage.
    I will do more local investigation now that I know that I am not tripping
    over something obvious.
    KiwiBrian, Aug 29, 2008
    #3
  4. KiwiBrian wrote:

    > I wish to control the text line-height, and the paragraph vertical
    > spacing, of several rows of text on a page irrespective of any styles
    > in an external stylesheet that is applied to the page.


    That's a frustrating situation, since external stylesheets can do nasty
    things, like
    * { line-height: 1.3 !important; }
    so you would have to set the relevant properties for _all_ elements, with
    the !important specifier. In practice, that might be a little too paranoic.

    Moreover, you _cannot_ control things against suitably strong (!important)
    settings in user style sheets.

    > <div style="FONT-SIZE: 14px; LINE-HEIGHT: 16px; FONT-FAMILY: arial;
    > TEXT-ALIGN: left">


    That looks like something generated by IE when saving a stylesheet; it loves
    to SHOUT.

    It also uses px which is bad, real bad. In addition to all the usual issues
    (which you should have studied when reading an introduction to the elements
    of basics of web authoring), px values create a nasty situation. Suppose
    that the user forces the the font size to 18px, which can be done rather
    easily, or the _minimum_ font size to 18px, which is easy in Firefox. This
    will not affect line-height, since you have set it with a px value. It is of
    course possible to set line-height in a user stylesheet, but that's not as
    simple as simple font size control by users.

    Guess what happens to 18px text with a line height of 16px. Well, it really
    depends, on the font and on the text, but it's really not a good idea. So
    whatever you do otherwise, set line-height in relative units. Here pure
    numbers (e.g., line-height: 1.3) - which are interpreted as relative to font
    size - is somewhat better than the em unit, for reasons related to
    inheritance.

    And use a large enough value. Using 16px for 14px means a factor of 1.14,
    which is really too little for Arial under typical circumstances. And what
    happens if the user loves Verdana _so_ much (as many web _authors_ seem to
    do) and has forced his browser to use it for everything? :)

    > <p style="MARGIN: 1px 0px">Several lines of text e.g. I wish to


    Returning to the issue of nasty extraterrest... external stylesheets, you
    need to take into account that they can well set
    p { font-size: 9px; }
    which will then determine your page's text size - even without !important.
    The point is that you have only set the font size for the div element, not
    for the p elements.

    Write 100 times: Inheritance doesn't do what people think it does.

    > Why does the vertical margin not seem to be in control of the vertical
    > spacing between consecutive paragraphs but is aparantly overrridden
    > by an external style?


    I'm not sure how you expect to distinguish between 1px margin and no margin.
    What kind of spacing do you see? As I explained, external style sheets can
    easily override your settings. They could also set the padding property, and
    in many simple cases, you cannot really tell the difference between effects
    of padding and margin.

    If you want specific help with a specific problem, you need to reveal the
    specifics of the problem somehow - specifically, the external stylesheets.
    You just have to extract the relevant parts, removing all company
    confidential text data etc., and upload a demo page on a web server and tell
    us the URL.

    Yucca
    Jukka K. Korpela, Aug 29, 2008
    #4
    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. Abhi
    Replies:
    2
    Views:
    734
    E. Robert Tisdale
    Jul 3, 2003
  2. Alvin
    Replies:
    7
    Views:
    474
    E. Robert Tisdale
    May 6, 2005
  3. Replies:
    3
    Views:
    457
  4. Daniel Vallstrom
    Replies:
    2
    Views:
    1,875
    Kevin Bracey
    Nov 21, 2003
  5. Ken Varn
    Replies:
    0
    Views:
    443
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page