Tue, 2007-02-27 15:37
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!
Tue, 2007-02-27 16:17
#1
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.
Tue, 2007-02-27 16:18
#2
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
Tue, 2007-02-27 17:21
#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;
}