css text background wrap

Discussion in 'HTML' started by w33bster@googlemail.com, Jul 17, 2007.

  1. Guest

    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
     
    , Jul 17, 2007
    #1
    1. Advertising

  2. Amos E Wolfe Guest

    <> wrote in message
    news:...
    > 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
     
    Amos E Wolfe, Jul 17, 2007
    #2
    1. Advertising

  3. Guest

    On 17 Jul, 13:02, "Amos E Wolfe" <> wrote:
    > <> wrote in message
    >
    > news:...
    >
    >
    >
    > > 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


    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
     
    , Jul 17, 2007
    #3
  4. wrote:
    > On 17 Jul, 13:02, "Amos E Wolfe" <> wrote:
    >> <> wrote in message
    >>
    >> news:...
    >>
    >>
    >>
    >>> 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

    >
    > 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
     
    Jonathan N. Little, Jul 17, 2007
    #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. Mantic
    Replies:
    3
    Views:
    654
    Benjamin Niemann
    Sep 2, 2006
  2. Victor
    Replies:
    6
    Views:
    711
    Alexey Smirnov
    Jun 5, 2007
  3. Aaron Fude

    To wrap or not to wrap?

    Aaron Fude, May 8, 2008, in forum: Java
    Replies:
    12
    Views:
    718
    Chronic Philharmonic
    May 10, 2008
  4. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 22, 2003, in forum: Perl Misc
    Replies:
    0
    Views:
    255
    Art Werschulz
    Sep 22, 2003
  5. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 24, 2003, in forum: Perl Misc
    Replies:
    1
    Views:
    258
    Anno Siegel
    Sep 25, 2003
Loading...

Share This Page