Help with wrapping text?!

HTML & CSS
1

Hi,

I have been given a UK site to clone into various European sites. Obviously, this requires translating the text and tweaking the template to accomodate!

I am having trouble wrapping the text on the submenu (left hand side), an example of which can be seen here

The css for this is below but I can’t literally change the width as this affects the background image and cuts it off. I have tried adding an additional style in a <span> but this has no effect.


      .subpages ul li a{
        /*background: #eeeeec;*/
        background: url(/media/618/leftnavheadingbg.png) top left no-repeat;
        display: block;
        font-size: 12px; line-height: 16px; font-weight: bold; color: #918b8b; text-decoration: none;
        width: 217px; height: 42px; padding-bottom: 3px; padding-top: 22px; padding-left: 8px;
        border-top: none;
        /*color: #000000;*/
        position: relative;
        left: -1px;
      }

Ideally, I need to wrap and vertically align the text. Any pointers?

Thanks,
Rachel

2

You could try this, but if you want the pointer symbol to align with the top line then the background image would need reworking. Width has been removed and negative right margin used to pull the anchor to the desired width. Only tried in Firefox using Firebug, so needs further testing.

.subpages ul li a {
	background: url("/media/618/leftnavheadingbg.png") no-repeat scroll left top transparent;
	border-top: medium none;
	color: #918B8B;
	display: block;
	font-size: 12px;
	font-weight: bold;
	height: 54px;
	left: -1px;
	line-height: 16px;
	margin-right: -8px;
	padding: 10px 26px 3px 8px;
	position: relative;
	text-decoration: none;
	}

.subpages ul li ul li a { /* new, to compensate  */
	margin-right:0;
	}
3

That’s awesome :slight_smile: Thanks for your help!