...

View Full Version : css text wrap and background problem



w33b
07-17-2007, 04:13 PM
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: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. :confused:

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

koyama
07-18-2007, 07:55 AM
I magically lose the border on the next line which is a tad frustrating. :confused:
Well that's how borders work on inline elements. Can you not produce a similar effect by wrapping the inline element in a div and then apply a left border on that div?

w33b
07-18-2007, 08:51 AM
yeah, I tried that also but I lose the padding on the right hand side of the text then.

I also tried setting the white-space to pre but this didn't really work either!

koyama
07-18-2007, 03:11 PM
yeah, I tried that also but I lose the padding on the right hand side of the text then.
I see what you mean. I'm afraid that there may not be a good way to solve this. But maybe someone else knows?

ahallicks
07-18-2007, 04:00 PM
DO you have a link to your page? It'll be easier to work out what's wrong if we can see everything you've done because the problem might not be caused by what you've posted solely.

w33b
07-18-2007, 04:22 PM
I've got a workaround that work but will depend on the user entering extra line spaces when entering content (i forgot to mention it was for dynamic text...oops)


#titlePara
{
border-left:15px solid #65C7C6;
}

.heading {
display:inline;
color:#FFFFFF;
border-top:3px solid #65C7C6 ;
border-bottom:3px solid #65C7C6 ;
background-color:#65C7C6;
font-size:16px;
font-weight:bold;
line-height:25px;
white-space:pre-wrap;
}


<div id="titlePara">
<p class="heading"><?=(str_replace("\n","&nbsp;&nbsp;<br />",$arrPage["titlePara"]))?></p>
</div>

This works by catching the eol (\n) and replacing it with a <br>. A bit messy but it works!!!

Thanks for your help. Any suggestions/improvements welcome.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum