css text background wrap

Hi
I have some text that I want to add a background-color to so I've got
a span tag with a class defining the following:

display:inline;
color:#FFFFFF;
border-top:5px solid #65C7C6 ;
background-color:#65C7C6;

which works great if my text all fits on one line however the problem
comes when wrapping the text. I magically lose the border on the next
line which is a tad frustrating.

I've tried wrapping the lot in a p tag with similar css to above as
well as using padding instead of a border.

here is an example of what I'm after: http://www.rees-jenkins.co.uk/stuff/textwrapproblem.gif

any one got any ideas?

w33b

Re: css text background wrap

wrote in message
news:1184672806.630549.188140@i13g2000prf.googlegroups.com.. .
> Hi
> I have some text that I want to add a background-color to so I've got
> a span tag with a class defining the following:
>
> display:inline;
> color:#FFFFFF;
> border-top:5px solid #65C7C6 ;
> background-color:#65C7C6;
>
> which works great if my text all fits on one line however the problem
> comes when wrapping the text. I magically lose the border on the next
> line which is a tad frustrating.
>
> I've tried wrapping the lot in a p tag with similar css to above as
> well as using padding instead of a border.
>
> here is an example of what I'm after:
> http://www.rees-jenkins.co.uk/stuff/textwrapproblem.gif
>
> any one got any ideas?
>
> w33b
>

You haven't set any kind of border or padding on the left-hand side: try
"padding-left: 5px;" although I would recommend a more fluid layout using em
or % if at all possible.

--
-=# Amos E Wolfe #=-
AIM: Traindriver9334
Get Firefox: http://www.spreadfirefox.com/?q=user/register&r=122394

Re: css text background wrap

On 17 Jul, 13:02, "Amos E Wolfe" wrote:
> wrote in message
>
> news:1184672806.630549.188140@i13g2000prf.googlegroups.com.. .
>
>
>
> > Hi
> > I have some text that I want to add a background-color to so I've got
> > a span tag with a class defining the following:
>
> > display:inline;
> > color:#FFFFFF;
> > border-top:5px solid #65C7C6 ;
> > background-color:#65C7C6;
>
> > which works great if my text all fits on one line however the problem
> > comes when wrapping the text. I magically lose the border on the next
> > line which is a tad frustrating.
>
> > I've tried wrapping the lot in a p tag with similar css to above as
> > well as using padding instead of a border.
>
> > here is an example of what I'm after:
> >http://www.rees-jenkins.co.uk/stuff/textwrapproblem.gif
>
> > any one got any ideas?
>
> > w33b
>
> You haven't set any kind of border or padding on the left-hand side: try
> "padding-left: 5px;" although I would recommend a more fluid layout using em
> or % if at all possible.
>
> --
> -=# Amos E Wolfe #=-
> AIM: Traindriver9334
> Get Firefox:http://www.spreadfirefox.com/?q=user/register&r=1223 94

that a mistake in my post, the border does go all way around.

on your other point...why would I want to use a fluid layout for this?
I want to add a background to some text that may or may not wrap and
always have the same padding/border even when t goes on to a new
line....I fail to see how changing anything to a % will help!?

thanks though

Re: css text background wrap

w33bster@googlemail.com wrote:
> On 17 Jul, 13:02, "Amos E Wolfe" wrote:
>> wrote in message
>>
>> news:1184672806.630549.188140@i13g2000prf.googlegroups.com.. .
>>
>>
>>
>>> Hi
>>> I have some text that I want to add a background-color to so I've got
>>> a span tag with a class defining the following:
>>> display:inline;
>>> color:#FFFFFF;
>>> border-top:5px solid #65C7C6 ;
>>> background-color:#65C7C6;
>>> which works great if my text all fits on one line however the problem
>>> comes when wrapping the text. I magically lose the border on the next
>>> line which is a tad frustrating.
>>> I've tried wrapping the lot in a p tag with similar css to above as
>>> well as using padding instead of a border.
>>> here is an example of what I'm after:
>>> http://www.rees-jenkins.co.uk/stuff/textwrapproblem.gif
>>> any one got any ideas?
>>> w33b
>> You haven't set any kind of border or padding on the left-hand side: try
>> "padding-left: 5px;" although I would recommend a more fluid layout using em
>> or % if at all possible.
>>
>> --
>> -=# Amos E Wolfe #=-
>> AIM: Traindriver9334
>> Get Firefox:http://www.spreadfirefox.com/?q=user/register&r=1223 94
>
> that a mistake in my post, the border does go all way around.
>
> on your other point...why would I want to use a fluid layout for this?
> I want to add a background to some text that may or may not wrap and
> always have the same padding/border even when t goes on to a new
> line....I fail to see how changing anything to a % will help!?
>

Answered in comp.infosystems.www.authoring.stylesheets. Please don't
multi-post, cross-post if you must.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com