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?

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" <(E-Mail Removed)> wrote in message
news:P8Arc.69$(E-Mail Removed)...
> 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?
>
>
>
>
>
>

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" <(E-Mail Removed)> wrote in message
news:e7pE3m%(E-Mail Removed)...
> 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" <(E-Mail Removed)> wrote in message
> news:P8Arc.69$(E-Mail Removed)...
> > 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?
> >
> >
> >
> >
> >
> >
>
>

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" <(E-Mail Removed)> wrote in message
news:8sOrc.439$(E-Mail Removed)...
> 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" <(E-Mail Removed)> wrote in message
> news:e7pE3m%(E-Mail Removed)...
> > 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" <(E-Mail Removed)> wrote in message
> > news:P8Arc.69$(E-Mail Removed)...
> > > 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?
> > >
> > >
> > >
> > >
> > >
> > >
> >
> >
>
>
>

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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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" <(E-Mail Removed)> wrote in message
> news:8sOrc.439$(E-Mail Removed)...
> > 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" <(E-Mail Removed)> wrote in message
> > news:e7pE3m%(E-Mail Removed)...
> > > 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" <(E-Mail Removed)> wrote in message
> > > news:P8Arc.69$(E-Mail Removed)...
> > > > 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?
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > >
> > >
> >
> >
> >
>
>

That's why they have a preview mode.

Wally S

"Fuse - News" <(E-Mail Removed)> wrote in message
news:88Trc.612$(E-Mail Removed)...
> 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" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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" <(E-Mail Removed)> wrote in message
> > news:8sOrc.439$(E-Mail Removed)...
> > > 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" <(E-Mail Removed)> wrote in message
> > > news:e7pE3m%(E-Mail Removed)...
> > > > 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" <(E-Mail Removed)> wrote in message
> > > > news:P8Arc.69$(E-Mail Removed)...
> > > > > 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?
> > > > >
> > > > >
> > > > >
> > > > >
> > > > >
> > > > >
> > > >
> > > >
> > >
> > >
> > >
> >
> >
>
>
>