Stylesheets - Positioning of list-style-image

Author

Positioning of list-style-image

Chris Leipold

2004-11-16, 7:13 pm

Hello,

I have an ul with a custom bullet symbol, like that:
ul {
list-style-image:url(foo.png);
}

Does anyone know a way to define the vertical alignment of the image?
I tried line-height, padding and margin but the results aren't very good.

I already googled a lot but it seems there's no answer :-(
Any idea is appreciated!

Chris

PS: Sorry, I have no example online.

Harlan Messinger

2004-11-16, 7:13 pm

"Chris Leipold" <cleipold@dietzk.de> wrote in message
news:2v8vu4F2jd1e8U1@uni-berlin.de...
> Hello,
>
> I have an ul with a custom bullet symbol, like that:
> ul {
> list-style-image:url(foo.png);
> }
>
> Does anyone know a way to define the vertical alignment of the image?
> I tried line-height, padding and margin but the results aren't very good.

How about editing the image, adding padding to or removing it from the top?

Rijk van Geijtenbeek

2004-11-16, 7:13 pm

On Mon, 08 Nov 2004 11:26:08 +0100, Chris Leipold <cleipold@dietzk.de>
wrote:

> Hello,
>
> I have an ul with a custom bullet symbol, like that:
> ul {
> list-style-image:url(foo.png);
> }
>
> Does anyone know a way to define the vertical alignment of the image?
> I tried line-height, padding and margin but the results aren't very good.
>
> I already googled a lot but it seems there's no answer :-(
> Any idea is appreciated!
>
> Chris
>
> PS: Sorry, I have no example online.

There are no style rules to control this. Including some transparent
padding in the image itself might be your best shot at 'controlling' this.
Are you using this for list items that usually take no more than a single
line?

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

Chris Leipold

2004-11-16, 7:13 pm

Hi,

> There are no style rules to control this.
I feared so :-(

> Including some transparent padding in the image itself might be your
> best shot at 'controlling' this.
That's the way I did it now. But the problem is that IE positions the
bullets different as other browsers. I have the choice between pad the
image for IE or any 'good' browser. My boss uses IE, so I have to bent
over...

> Are you using this for list items that usually take no more than
> a single line?
Yes, why do you ask?

Thanks for the info

Chris

Rijk van Geijtenbeek

2004-11-16, 7:13 pm

Chris Leipold

2004-11-17, 12:16 pm

Hi again,

Chris Leipold wrote:
> I have an ul with a custom bullet symbol, like that:
> ul {
> list-style-image:url(foo.png);
> }
>
> Does anyone know a way to define the vertical alignment of the image?
> I tried line-height, padding and margin but the results aren't very good.

I now found a workaround:
ul {
list-style:none;
}
li {
margin:0;
padding:0;
padding-left:40px;
background-image:url(../img/logo_faq.png);
background-repeat:no-repeat;
background-position:12px 8px;
}

It's not exactly right, but it does exactly what I want...

Chris

kchayka

2004-11-17, 7:18 pm

Chris Leipold wrote:
>
> ul {
> list-style:none;
> }
> li {
> margin:0;
> padding:0;
> padding-left:40px;
> background-image:url(../img/logo_faq.png);
> background-repeat:no-repeat;
> background-position:12px 8px;
> }
>
> It's not exactly right, but it does exactly what I want...

So what about those folks who browse with image loading off? They get
nothing? Lists with no bullet markers at all can be hard to read, so
you're potentially creating a usability problem here.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Jón Fairbairn

2004-11-17, 11:15 pm

Chris Leipold <cleipold@dietzk.de> writes:

> Hi again,
>
> Chris Leipold wrote:
>
> I now found a workaround:
> ul {
> list-style:none;
> }
> li {
> margin:0;
> padding:0;
> padding-left:40px;
> background-image:url(../img/logo_faq.png);
> background-repeat:no-repeat;
> background-position:12px 8px;
> }
>
> It's not exactly right, but it does exactly what I want...

Might not something like this be more appropriate:

@media screen {
li:before {display: marker;
content: url("../img/logo_faq.png");
vertical-align: 8px; /* choose this ... */
padding-right: 12px; /* and this */
}
li {list-style-type: none; }
}

As far as I can tell, setting the list-style-type to none
shouldn't be necessary; to quote REC-CSS2:

When the 'display' property has the value 'marker' for
content generated by an element with 'display:
list-item', a marker box generated for ':before' replaces
the normal list item marker.

but firefox 1.0PR displays both a bullet and an image if I leave
it out.

--
Jón Fairbairn Jon.Fairbairn@cl.cam.ac.uk

Chris Leipold

2004-11-21, 4:17 am

kchayka

2004-11-22, 4:16 am

Jón Fairbairn

2004-11-22, 7:15 am