Maybe this is too simple - but when I've come across an issue like
this, I make the image bigger. Meaning, if my page background is
green, and my bullet is black, I'll make my image with the padding
built into the top (or bottom, as needed) of the image itself, and
make the background green so it blends in. So if, for example, my
bullet is sticking up there about 5 pixels above where it should be,
then I'll edit the actual image to push the bullet down 5 pixels.
I also usually make the background semi-transparent, so IE won't show
the edge of the image (sometimes the color is off a bit from the
background of the image and the background of the page).
Then you can set the image as your list-type (you said what you want
is to have the image, but if images are turned off have a default -
and currently using a "list-style-image:url(image.gif); " works, but
it's up too high?) and since the actual image has the padding built
in, then it should do exactly what you want.
I've never had a problem with this at all. It seems kind of crude,
but it works!
~Shelly
On Nov 15, 2005, at 7:44 AM, Philippe Wittenbergh wrote:
>
> On 15 Nov 2005, at 5:15 pm, Mark Batty wrote:
>
>> The objective is to use an image marker for the list items and if
>> images are
>> not available or turned off I want a default marker (e.g. disc) to be
>> used.
>>
>> I can make this work easily if I move the image into the ul style
>> with
>> list-style-image; however I then have positioning issues with lining
>> up the
>> images. I'm using a technique above that sets the image on each list
>> item
>> which ensures that it lines up correctly across browsers.
>>
>> Anyone know how I can still get a default marker with the above (or
>> similar)
>> technique?
>
> You possibly can do it, but it would probably be a hell of a time to
> position things correctly:
> ul {
> list-style:square;
> margin-left: xxem /* indent list items for edge of box */;
> padding-left: 15px /* size of image*/
> li {
> background url(image.gif);
> padding-left: xx px /* adapt to image */
> margin-left: -15px /* matching padding-left on the ul */
> }
>
> Then use a non-transparent image; maybe it will cover up the
> list-marker.
>
> Untested.
>
> Philippe
> ---
> Philippe Wittenbergh
> <http://emps.l-c-n.com/>
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
