3 replies [Last post]
tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 6 years 48 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

If you go to this page:
http://www.richardsbrick.com/otherProd.php

or look at the right hand side of this page:
http://www.richardsbrick.com

You will see a bulleted list.

My style is this:

/* Lists */
ul.listDecor {
list-style-image:url(images/bulletGold.gif);
color:#666666;
font-size: 1.0em;
padding-left: 0px;
margin-left: 15px;
margin-right: 5px;
}

ul.listDecor li {

}

ul.listDecor ul {
margin-left: 0px;
list-style-type: disk;
color: #000000;
}

While it looks fine on Mac browsers - - - on windows browsers > the bullet is up and to the left of the list item.

I have finagled throughout the building process - but cannot seem to fix the issue.

Thoughts? Thanks!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It's more common to

It's more common to eliminate the bullet and use a background graphic on the li to imitate the bullet. You'll have better cross-browser rendering.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 13 years 18 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

I would set list-style:

I would set list-style: none; on the ul instead of list-style-image:url(images/bulletGold.gif); ... this has always been a bit finicky in IEvsFF.

ul.listDecor { color: #666; font-size: 1.0em; padding-left: 0; margin: 0 5px 0 15px; list-style: none; list-style-type: none; }

ul.listDecor li {
margin: 0 0 5px 0;
padding: 0 0 5px 0;
background: url(images/bulletGold.gif) no-repeat 0 3px;
}

Then you just have to play with the background position. It's much easier in my opinion.

hth

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 6 years 48 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Thanks to both of you -

Thanks to both of you - -earlier I went back into it and did just that. And it worked.

I didn't know that a bg image was better for the list.

Anyway - here is my code, and thanks for the comments.

/* Lists */ ul.listDecor { color:#666666; font-size: 1.0em; padding-left: 0px; margin-left: 5px; margin-right: 5px; } ul.listDecor li { list-style:none; list-style-position:outside; background-image:url(images/bulletGold.gif); background-position:left; background-repeat:no-repeat; padding-left: 10px;

}

ul.listDecor ul {
margin-left: 0px;
list-style-type: disk;
color: #000000;
}