Add bullet

HTML & CSS
1

Hi,

I need to add bullet to the content on this index page (brown area), but everything I tried failed. Can someone help?

Here’s the link:

http://www.valuehomebuyers.com/index.html

* Do you have a house that needs a lot of repairs?
* Do you owe more on your house than what it's worth?
* Do you need to sell quickly because of a job transfer?
* Did you inherit a property?

Thanks

2 
<ul>
           <li>Do you have a house that needs a lot of repairs?</li>
	<li>Do you owe more on your house than what it's worth?</li>
	<li>Do you need to sell quickly because of a job transfer?</li>
	<li>Did you inherit a property?</li>	   
</ul>

The above is the code in your html and so it appears you have removed bullets for lists by default in your css. You could try giving this one an id and then set either one of the “built in” bullets to the list or set your own bullet image for the list in your css.

3

You’ve got the following bit of CSS:

#intro h1, #intro h2, #intro p, #intro ul { 
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}

This is a particularly interesting idea, as you’re applying list-style properties to headings, subheadings and paragraphs (which don’t accept list-style properties), as well as the list itself.

If you want bullets, change the list-style-type to one of square/disc/circle, for a browser default bullet, or set a background image if you want to use your own image (this is more reliable than using list-style-image).

This is what happens when you use a boilerplate CSS template without understanding how it works…

4

Just out of curiosity, why is setting a background image more reliable than setting list-style-image?

Admittedly I have rarely used list-style-image, but on the few occassions I have, I haven’t had any problems with it.

5

I would have been helpful if you had given a code snippet to make it work as you noticed that I’m new to CSS.

Thanks

6

His point is you are applying a style which should be applied there and this just one portion of what is causing you problems. For a starter, remove that section of code as it’s invalid.

If you need to style it further, please reference the list area of the SP CSS reference. If you don’t get the answers there, come back with an updated page and we’ll try to help you further.

7

The problem is that the vertical (and horizontal) position of the list-image is decided by the browser and this varies between browsers quite a bit. Some place it lower down and some higher. None seem to cater for it properly at all.

For that reason (if you are looking for near pixel perfect positioning) using a background image (although a less semantic choice) is the easiest solution as you have absolute control over the position.

ould have been helpful if you had given a code snippet to make it work as you noticed that I’m new to CSS.

You have set the list item to display:block which means that it is no longer display:list-item and won’t show the bullet (IE6 won’t show bullets if the list is floated anyway).

Make these changes.


#intro ul.bullet{
list-style:disc;
margin:0 0 .2em 1.5em;
padding:0;
}
#intro ul.bullet li{
float:none;
display:list-item;
}

You have spelled class incorrectly here:


ul [B]clas[/B]="bullet"

That should get it working.:slight_smile:

8

Thanks Paul. I will try it.

9

ok thanks :slight_smile:

Yes I have noticed that the bullet images are not exactly where I would like them but it hasn’t caused any real concern thus far. I’ll keep the bg image option in mind the next time I want to use my own bullet image.

10

Yes it does depend on the size of the image and some will look ok so probably best to try list-image first as it is the more semantic choice and then if you can’t live with what it looks like use a background image instead.

The benefit of the list image is that you can set it to fallback to disc if the image is missing which you can’t do with a background image (unless you place the background image over the disc to hide it which is more work than needed I think :)).