Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css text wrap and background problem

    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:

    Code:
    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.

    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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by w33b View Post
    I magically lose the border on the next line which is a tad frustrating.
    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?

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by w33b View Post
    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?

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

    Code:
    #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;
    }
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •