How to limit text background colour to text itself?

[miked]

Hi,

On a webpage I'm authoring I'm having a problem with setting the text
background colour. I'm using this:

P {color ="FFFFFF"; background-color:"000000"; font-size:10pt;
font-family: verdana, courier, monospace}

with this:

<P>Body text goes here.</P>

I want to limit the background colour to just the text itself, but it
extends to the whole paragraph, often covering a large amount of space
that I don't want to be changed(am I right that this is a recent
property of IE and NN, that earlier versions supported what I
require?).

Does anyone know a way around this? I've tried trawling the groups but
couldn't find anything on this in paticular. Any help would be
appreciated, even if it's simply pointing out where I've missed this
already...

Thanks,
Mike D.

[brucie]

in post <news:e6**************************@posting.google. com>
miked said:

P {color ="FFFFFF";
#ffffff no quotes
background-color:"000000";
#000000 no quotes
font-size:10pt;
100%
font-family: verdana, courier, monospace}

monospace

instead of just making stuff up have you considered reading a tutorial
or two?
--
brucie
27/December/2003 09:38:04 pm kilo

[brucie]

in post <news:bs************@ID-117621.news.uni-berlin.de>
brucie said:

P {color ="FFFFFF";

#ffffff no quotes

or =
--
brucie
27/December/2003 09:42:40 pm kilo

[David Dorward]

brucie wrote:

font-family: verdana, courier, monospace}

monospace

instead of just making stuff up have you considered reading a tutorial
or two?

Well... it is valid, although offering courier and the monospace font family
as alternatives to Verdana does rank as weird in the extreme.

--
David Dorward <http://dorward.me.uk/>

[brucie]

in post <news:bs*******************@news.demon.co.uk>
David Dorward said:

font-family: verdana, courier, monospace}

monospace
instead of just making stuff up have you considered reading a tutorial
or two?

Well... it is valid,
i wasn't referring to that particular line
although offering courier and the monospace font family
as alternatives to Verdana does rank as weird in the extreme.

i thought it better just to not ask or even wonder.

--
brucie
27/December/2003 09:54:48 pm kilo

[Jukka K. Korpela]

m.*******@student.umist.ac.uk (miked) wrote:

P {color ="FFFFFF"; background-color:"000000"; font-size:10pt;
font-family: verdana, courier, monospace}
Only two of the declarations are formally correct by CSS
specifications, and they too are very poor pragmatically. Instead of
explaining all the details of why the above is all wrong, here's a
sensible rule:

p { color: #fff; background: #000; font-family: Arial, sans-serif; }

But the background applies to the p element, not just the text inside
it. This is how things are by definition in CSS.
I want to limit the background colour to just the text itself,
There's no such concept as "the text itself" in CSS.
(am I right that this is a
recent property of IE and NN, that earlier versions supported what
I require?).

In a weird way, you are right in an odd sense. Some previous versions
of some browsers got it wrong, coloring just the text (I guess this
applies mainly to NN 4, the zombie), which is what you want here. That
is, what you want is what browsers definitely must not do when a rule
like the above is used.

What you can do is to add a level of markup, making the content of the
p element an inline element, to which you can then apply background in
a manner that works by the rendering model of inline elements:

<p><span>Body text goes here.</span></p>

And you would then use p.span instead of p in CSS. Naturally, if you
use some properties that apply toblock elements only, you would use the
selector p when setting them (e.g., p { margin-left: 1em; }).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[miked]

Thanks, Jukka, for your constructive comments.

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message news:<Xn*****************************@193.229.0.31 >...

m.*******@student.umist.ac.uk (miked) wrote:

P {color ="FFFFFF"; background-color:"000000"; font-size:10pt;
font-family: verdana, courier, monospace}
Only two of the declarations are formally correct by CSS
specifications, and they too are very poor pragmatically.

I think the problem here is that I've only been learning this for a
few days, and I've been buzzing between a few tutorials...
Instead of
explaining all the details of why the above is all wrong, here's a
sensible rule:

p { color: #fff; background: #000; font-family: Arial, sans-serif; }

But the background applies to the p element, not just the text inside
it. This is how things are by definition in CSS.

I want to limit the background colour to just the text itself,
There's no such concept as "the text itself" in CSS.

Hopefully, I begin to understand a little better. I think you're
saying that since the p element is more than just the text contained
in it, then anything applied will apply to more than just the text.

(am I right that this is a
recent property of IE and NN, that earlier versions supported what
I require?).
In a weird way, you are right in an odd sense. Some previous versions
of some browsers got it wrong, coloring just the text (I guess this
applies mainly to NN 4, the zombie), which is what you want here. That
is, what you want is what browsers definitely must not do when a rule
like the above is used.

And so things don't display as I'd like because the browsers have
tightened up. Interesting!

What you can do is to add a level of markup, making the content of the
p element an inline element, to which you can then apply background in
a manner that works by the rendering model of inline elements:

<p><span>Body text goes here.</span></p>

And you would then use p.span instead of p in CSS. Naturally, if you
use some properties that apply toblock elements only, you would use the
selector p when setting them (e.g., p { margin-left: 1em; }).

I'll try this. Thanks again for your help.

Mike D.

[Jukka K. Korpela]

m.*******@student.umist.ac.uk (miked) wrote:

I think you're
saying that since the p element is more than just the text contained
in it, then anything applied will apply to more than just the text.

Yes. In rendering, the p element is a rectangle, with its width being
(by default) the entire available width. Text lines can be shorter than
that width and normally vary in length.

--
Yucca, http://www.cs.tut.fi/~jkorpela/