469,582 Members | 2,300 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,582 developers. It's quick & easy.

Positioning of list-style-image

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.
Jul 21 '05 #1
6 50005

"Chris Leipold" <cl******@dietzk.de> wrote in message
news:2v*************@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?

Jul 21 '05 #2
On Mon, 08 Nov 2004 11:26:08 +0100, Chris Leipold <cl******@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

Jul 21 '05 #3
Hi,
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? 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
Jul 21 '05 #4
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
Jul 21 '05 #5
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.
Jul 21 '05 #6
Chris Leipold <cl******@dietzk.de> writes:
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...


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 Jo***********@cl.cam.ac.uk

Jul 21 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Harlan Messinger | last post: by
3 posts views Thread by Roamer | last post: by
6 posts views Thread by Stan Brown | last post: by
2 posts views Thread by Tim Charles | last post: by
1 post views Thread by David Dorward | last post: by
8 posts views Thread by yb | last post: by
1 post views Thread by Eric | last post: by
13 posts views Thread by Casimir Pohjanraito | last post: by
reply views Thread by slaterino | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.