[WSG] Custom Bullets
Hi,
For the first time I am using custom bullets image. Just to try
something different. Anyway FF displays it correctly but when viewing it
in IE6 i can still see the default disc bullet then my custom bullet.
ul li {list-style-image: url(images/tick.png); margin-left: 20px;}
I have tried most of the examples on the web of setting a background
image for li but still no luck?
Thanks.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Custom Bullets
On 8/8/06, Able Net Design [EMAIL PROTECTED] wrote:
I have tried most of the examples on the web of setting a background
image for li but still no luck?
I've never had any trouble setting background images for LI:
ul {
list-style-type: none;
}
ul li {
background: url(images/mybullet.gif) no-repeat 0 50%;
padding-left: 25px;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Custom Bullets
Sounds like you may have a problem with either one of your other CSS
rules or with the HTML structure - do you have an example page online?
Mike
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of Able Net Design
Sent: Tuesday, August 08, 2006 7:40 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Custom Bullets
Hi,
For the first time I am using custom bullets image. Just to try
something different. Anyway FF displays it correctly but when
viewing it
in IE6 i can still see the default disc bullet then my
custom bullet.
ul li {list-style-image: url(images/tick.png); margin-left: 20px;}
I have tried most of the examples on the web of setting a background
image for li but still no luck?
Thanks.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Custom Bullets
Hello, Mike he doesnt have any problem that you not gonna get if you put ul or ol display: inline or block. I had try and search everyhere, i even see in list apart a article that display: inline and have bullets but after 15 minuts i see that he use background-image to get that. You could try and you will see that isn´t problem of him but a problem of all us. I never had see that, i had always use inline or float but without list-style. I think the only solutions are you use images but for numbers will be complicate even using pseudo :after :before they not work in ie. On 08/08/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Sounds like you may have a problem with either one of your other CSS rules or with the HTML structure - do you have an example page online? Mike -- Make it simple for the people -- http://www.artideias.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Custom Bullets
Hi,
For the first time I am using custom bullets image. Just to try
something different. Anyway FF displays it correctly but when viewing it
in IE6 i can still see the default disc bullet then my custom bullet.
ul li {list-style-image: url(images/tick.png); margin-left: 20px;}
I have tried most of the examples on the web of setting a background
image for li but still no luck?
Don't bother with list-style image but use list-style none on BOTH UL
and LI and then use padding + background image and all is fine.
http://css.maxdesign.com.au/listamatic/vertical05.htm
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Custom Bullets
What happens when you remove the margin-left rule? Does the bullet come up
correctly?
I have found that IE can be particular when it comes to margins and paddings
on lists. Try playing around with using padding instead of margin, or your
margins on the UL instead of the LI, etc. etc.
-Original Message-
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of Christian Heilmann
Sent: Wednesday, 9 August 2006 1:22 a.m.
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Custom Bullets
Hi,
For the first time I am using custom bullets image. Just to try
something different. Anyway FF displays it correctly but when viewing it
in IE6 i can still see the default disc bullet then my custom bullet.
ul li {list-style-image: url(images/tick.png); margin-left: 20px;}
I have tried most of the examples on the web of setting a background
image for li but still no luck?
Don't bother with list-style image but use list-style none on BOTH UL
and LI and then use padding + background image and all is fine.
http://css.maxdesign.com.au/listamatic/vertical05.htm
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Custom Bullets
On 8/8/06, Rachel May [EMAIL PROTECTED] wrote:
What happens when you remove the margin-left rule? Does the bullet come up
correctly?
I have found that IE can be particular when it comes to margins and paddings
on lists. Try playing around with using padding instead of margin, or your
margins on the UL instead of the LI, etc. etc.
Global Whitespace reset is your friend.
*{
margin:0;
padding:0;
list-style:none;
}
http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Custom Bullets
On Aug 9, 2006, at 11:50 AM, Paul Novitski wrote:
PS: Frankly, since the list-style properties apply only to
elements with {display: list-item}, I'm a little surprised that
it's correctly applicable to UL at all and not just LI, but I guess
it's just a quirk of CSS that we can give a LIST CONTAINER a LIST-
ITEM display. When it is applied to UL, I assume that its child
LIs inherit the property, but I don't see the inherent advantage to
a rule like ul {list-style...} over li {list-style...}. Myself, I
always roll my own lists just with li {list-style-type: none;}.
li {list-style-type: none;} applies to all li on a page, in a ul or
a ol
Personally, I do ul li {list-style: whatever}. or ul.classname li {}
CSS 2.1 Specification
12 Generated content, automatic numbering, and lists
12.5 Lists
http://www.w3.org/TR/CSS21/generate.html#q10
the keyword here is:
inherited: yes
The list-marker will be applied to the descendants of the ul, not
the ul itself, as that on has display:block, unless otherwise
specified.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Custom Bullets
On Aug 9, 2006, at 11:50 AM, Paul Novitski wrote:
PS: Frankly, since the list-style properties apply only to
elements with {display: list-item}, I'm a little surprised that
it's correctly applicable to UL at all and not just LI, but I guess
it's just a quirk of CSS that we can give a LIST CONTAINER a LIST-
ITEM display. When it is applied to UL, I assume that its child
LIs inherit the property, but I don't see the inherent advantage to
a rule like ul {list-style...} over li {list-style...}. Myself, I
always roll my own lists just with li {list-style-type: none;}.
At 08:09 PM 8/8/2006, Philippe Wittenbergh wrote:
li {list-style-type: none;} applies to all li on a page, in a ul or
a ol
Personally, I do ul li {list-style: whatever}. or ul.classname li {}
...
the keyword here is:
inherited: yes
The list-marker will be applied to the descendants of the ul, not
the ul itself, as that on has display:block, unless otherwise
specified.
Yes, of course: I don't use the global rule
li {list-style-type: none;}
by itself as this would apply to OL LIs as well, but always in context, e.g.:
#navmenu li {list-style-type: none;}
What I meant was that I apply the rule to LI, not UL. However, I
think this is probably a point too fine to belabor as the rule works
equally well applied to either element.
Regards,
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Custom bullets not showing in IE
Title: Custom bullets not showing in IE
Hello all
Got an IE specific problem: Got a few custom bullets in lis that work (display) perfectly in FF, NN, Opera, but they dont shown in IE; IE 6 specifically.
What Ive done pretty much comes directly from Listorial so I cant see where Im going wrong in IE.
Can anyone help?
Heres the html snippet:
ul id=copyLinks
li class=emailClick a href="" to make a Tourer product inquiry./li
li class=downloadClick a href="" to download the Tourer Specification./li
/ul
And the attending CSS:
ul {
list-style-type: none;
}
#copyLinks {
margin: 15px 15px;
}
#copyLinks li {
margin-bottom: 10px;
font-size: 0.7em;
font-weight: bold;
color: white;
padding-left: 25px;
padding-bottom: 2px;
}
#copyLinks li.email {
background-image:url(../c/email_icon.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#copyLinks li.download {
background-image:url(../c/download_icon.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#copyLinks li a {
color: #6B7787;
text-decoration: none;
}
#copyLinks li a:hover {
color: #99;
text-decoration: underline;
}
