Inline style problem

[KiwiBrian]

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?

 

[dorayme]

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.

 

[KiwiBrian]

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.



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



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


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




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.



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.

 

[Jukka K. Korpela]

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