CSS List-Style Question

[Fuse - News]

I've been revamping the website and have 90% of it completed and converted
over to CSS. I must say, I love CSS since I started to use it and get
familiar with it.

OK.. the question. I'm attempting to convert our bulleted list topics on the
index page over to CSS.

Here's what I have so far for the CSS for the list

..topic-list {
list-style-image:
url('http://www.atvsource.com/images/site_images/checkered_bullet.gif');
line-height: 24px;
padding: 15px 5px 15px 5px; }

This works great, but I'm wanting to get each new bullet to stay together
instead of spreading apart. Example page:
http://www.atvsource.com/ which isn't what we I'm looking for.

Look at the following topic links on the page:
* Rhino and Sway-A-Way Roll at Moab - 05/18/2004
* ATV Club from MN Needs Everyone's Help on a YES Vote for More Riding
Areas - 05/14/2004
* Trail Access Groups File Notice of Intent to Sue at BLM Recreation Site -
05/14/2004
* American Sand Association is Having A Protest Rally - 05/14/2004

Notice when you shrink the browser down to say 800x600 screen resolution,
the bulleted list wraps to the next line, but the wrapped text doesn't butt
up against the first line for that bullet, but spreads out evenly over the
list. Example of what it does:

* Rhino and Sway-A-Way Roll at Moab - 05/18/2004

* ATV Club from MN Needs Everyone's Help on a YES Vote

for More Riding Areas - 05/14/2004

* Trail Access Groups File Notice of Intent to Sue at BLM

Recreation Site - 05/14/2004

* American Sand Association is Having A Protest Rally - 05/14/2004


I'm looking to do the following instead a bulleted list with space between
each bullet so they are not cramped together.

* Rhino and Sway-A-Way Roll at Moab - 05/18/2004

* ATV Club from MN Needs Everyone's Help on a YES Vote

for More Riding Areas - 05/14/2004

* Trail Access Groups File Notice of Intent to Sue at BLM
Recreation Site - 05/14/2004

* American Sand Association is Having A Protest Rally - 05/14/2004

Is this possible and what CSS would I need to use?

 

[Wally S]

Go to http://css.maxdesign.com.au/listamatic/index.htm You'll find
everything you need to know about lists there.

Wally S

 

[Fuse - News]

Want to say thanks for the link. However, I'm still having some difficulty
getting just one thing to work.

Here's the CSS for the List that we put together:
..topic-list {
margin-left: 15;
padding-left: 0;}

..topic-list li {
list-style-image:
url('http://www.atvsource.com/images/site_images/checkered_bullet.gif');
background-repeat: no-repeat;
padding: 15px 15px 0px 15px;
/*list-style-position: outside;*/}

The one problem we are having is the "outside" which will make sure that the
text doesn't wrap underneath the marker, but will wrap under the beginning
of the text. But, we cannot get this to work. Supposedly, the "Outside" is
the default, but it doesn't work that way for us. When we put this part
"list-style-position: outside;" in the css for the list, our style image
disappears and the text will work like it should. When we comments this css
field out, the style image will return, but the text wraps underneath the
style image rather than outside of it.

Example URL: http://www.atvsource.com/ FYI: you may have to shrink your
browser window down so the text wraps for you to see the ill affect it has.

What is causing this and how does one fix it?

 

[Wally S]

I went on your site with a small browser window, and the text wraps just as
it should. These things don't always look right in design view. You have to
look at them in Preview or Preview in browser. But on your site, the list
looks fine.

Wally S

 

[Fuse - News]

Yes, we realized that after we decided to publish it to the main site anyway
to see what it looked like there. Do not know why the design view in FP2003
does that, but at least it shows the correct way from the server.

Just want to say THANKS for all the help and I've learned a lot from this
group!!

 

[Wally S]

That's why they have a preview mode.

Wally S

Yes, we realized that after we decided to publish it to the main site anyway
to see what it looked like there. Do not know why the design view in FP2003
does that, but at least it shows the correct way from the server.

Just want to say THANKS for all the help and I've learned a lot from this
group!!