css / html


Please see attached jpg called sort_schedft.jpg. This is the result of the attached html sort_schedft.htm.

My objective is to cause a 2nd line within the <li> so that in effect, there is a <br> after the text & before the numbered link.

I tried this with sort_schedule_br.htm (attached) which should be identical to the other html file (sort_schedft.htm) except that it has a <br> where I thought it should go. This produces the very odd attachment sort_schedule_br.jpg.

How can I use css / html to achieve the desired result?

I can provide a live link if necessary but it's a little messy.

Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

use list-style none on the ul, then put the icon as the background image. Put enough padding on the li to move it over away from the icon and get rid of the breaks so the text can wrap naturally.

Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:

Not sure I know what you mean by this:  "and get rid of the breaks so the text can wrap naturally."
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Also, I don't know how to put the icon as the background image.

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ignore what I said about the breaks I was seeing something in the question that is not there. I thought you were trying to do a natural wrap, but you want it specifically for the link.  Sorry about that.

For the background

ul {background-image:(urlofthe image);background-repeat:repeat-y;}

Though from a usability standpoint I would recommend you just make the whole li dragable which would eliminate the need for the icon.

Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I can't see how to access that image (icon); it's hidden somewhere in the bowels of Jquery, I can't figure it out.

I still don't see how I get the line break to show the link & other info (what they call MapsCo).

Robert SchuttSoftware EngineerCommented:
I think much of the strangeness is caused by having an unnecessary extra <span> in each <li> which is targeted by your css "#sortable li span":
<span style='color:blue !important; text-decoration: underline;'>

Open in new window

You should be able to set these styles on the <a> directly:
#sortable li a { color: blue !important; text-decoration: underline; }

Open in new window

and the html gets simpler:
<li class="ui-state-default" id="198515"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>5516 RANDELL ST., FORT WORTH - PAM BURLESON - Check her rain & freeze sensor, has been using bypass mode to run system, check and adjust system<br><img src='images/spacer.gif' width='30' height='5'><a href='#' onClick="open_wo_win('198515', '20720')";>198515</a><img src='images/spacer.gif' width='70' height='5'>MapsCo: 90T</li>

Open in new window

Note that if the screen is not so wide you may want to remove the fixed height from the "#sortable li" css.
Note 2 that you can drag using the whole <li> so not just the icon.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Dear Experts,

I have not abandoned this question, I am hung up with other urgent tasks, will get back to it ASAP.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.