Hidden bullet images

I have page here that contains a custom bulleted list: http://zoomapartmentfinder.com/terms-of-service
I know how to adjust margins, padding and indent to show what I call a hanging indent list, meaning the bullet is the only item hanging out to the left and the multiple line text aligns left to the right of the hanging bullet.

In this case, the bullets disappear when I apply these selectors. I was hoping someone could tell me how to modify the Drupal style sheet or something else to apply inline styles in the right way and show the bullets when they hang left.
weknowjackAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

RobOwner (Aidellio)Commented:
As the bullet is inserted :before the text in each li, try floating it as that seemed to work when inspecting your site

li:before {
    float: left;
}
0
weknowjackAuthor Commented:
Thanks. It works ok until the 4th bullet which breaks into 3 lines. The 3rd line hangs left. Same with any <li> that has more than 2 lines, I suppose because the bullet itself is what is pushing them right. I tried margin, padding and indent but they all seem to create a different problem.
0
weknowjackAuthor Commented:
Oops. I'm not sure I'm placing the code in the right place. I tested it using Firebug and the CSS Editor plugin. Then just now when I place your code into the style.css file it doesn't show the change. Firebug shows that the css for the page is in the page, but it isn't that I can tell.
0
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!

weknowjackAuthor Commented:
Now it is showing as I described in my first reply to you. I guess the server took a few seconds to update. As you can see the third line hangs left.
0
RobOwner (Aidellio)Commented:
That's a min height issue. I've tried to get around this with css only but i am thinking you'll need some JavaScript to calculate the height of each section or just set the min height
0
weknowjackAuthor Commented:
Min-height of what? Hard to believe js is the only real solution for something so common.
0
RobOwner (Aidellio)Commented:
min-height of the bullet point.  This would set every bullet point to the maximum possible height e.g. 3 lines of text if that's going to be the maximum

I understand your frustration, I'm only trying to work with what you've got and the template you're using.  I wouldn't do it this way but rather use a templating engine like bootstrap http://getbootstrap.com.   It's also important to note that your site isn't responsive, meaning that it can only be viewed at a certain resolution or higher.  On smaller screens like tablets and phones, the site becomes unusable (hence using bootstrap as it automatically arranges your content based on the width).  I'm not sure how much you've invested in this template but I would strongly suggest changing it to make it responsive.  This would also allow you to add bullet points with corresponding text that have the hanging indents you're after.

Because the template inserts the bullet into the same element as the content (via the :before pseudonym), we are limited to modifying either the <li> element (that includes the :before) or targetting just the :before element.  As the height isn't known at any stage, js would be used to determine that to set the height of the :before element.
0
weknowjackAuthor Commented:
I paid to have this site mobile friendly. I run it through the Google Mobile Friendly test and it passes. However, you are correct that it is not nicely responsive. I'm not a coder. I'd have to farm out the js. What is the learning curve for bootstrap? I have several sites that need to be converted to responsive.

And back to my question, are you saying that the issue I'm having with the CSS  and bullets are related to the template itself?
Can the way the template inserts the bullet be changed fairly easily?

Thanks for the help.
0
RobOwner (Aidellio)Commented:
The learning curve for bootstrap isn't steep but you said you're not a coder so I'm really unsure how steep that would be.  Essentially you put all your content inside <div> tags that have special classes (rows and columns of certain size), where the bootstrap css file determines the required width based on the device you're viewing it on.

Back to your question, the issue is the template and how the bullets are inserted.  The way it is done doesn't give you the ability to create a hanging indent.  If you're able to wrap each of the text components of the bullet like this:

<li>
<div>bullet point stuff goes here</div>
</li>

then you can get a workaround like this:

#disclaimer-list li:before {
    float: left;
}
#disclaimer-list li > div {
    float: left;
    width: 95%;
}
0

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
weknowjackAuthor Commented:
Excelent
0
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
CSS

From novice to tech pro — start learning today.