Thanks very much Seona. That works fine.
One small problem - which I can live with if necessary - is that
there is now a lot more work involved setting up the lists.
What I have now is this:
ul#NoBullet
{
list-style: none;
margin-left: 25px;
padding-left: 0px;
}
li#TickGreenSmall
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
background: transparent url(/images/Tick-green-small.gif)
3px left no-repeat;
}
The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the
UL, I also have to define every line.
Is there a more efficient way to combine [UL ID="NoBullet"] and
[LI ID="SomeListStyleHere"]
TIA
- Bill H.
> -----Original Message-----
> From: Seona Bellamy [mailto:[EMAIL PROTECTED]
> Sent: Tuesday, November 15, 2005 2:47 PM
> To: [EMAIL PROTECTED]
> Subject: Re: [css-d] CSS & Lists
>
>
> On 15/11/05, Bill Hely <[EMAIL PROTECTED]> wrote:
> > I'm trying to come to grips with using CSS with lists.
> >
> > When using an image as a bullet point, is it possible to
"push
> > the image down" so it doesn't project well above the text
> > associated with that bullet?
>
> A better way than using list-style-image is to set the
list-style-type
> to "none" and make your bullet a background image. Something
like:
>
> ul#TickGreenSmall {
> list-style-type: none;
> margin-left: 40px;
> padding-left: 0px;
> margin-top: 5px;
> }
> li {
> padding-top: 2px;
> padding-bottom: 2px;
> padding-left: 20px;
> background: transparent
url(/images/Tick-green-small.gif) 3px
> left no-repeat;
> }
>
> Just tweak the top osition of the background until it's sitting
where
> you want it, and play with your padding-left until the text has
> cleared the image properly. Takes a bit of trial and error, but
it's a
> lot easier than trying to tame a list-style-image.
>
> > I can get the required effect easily enough with a table and
> > images, but...
>
> ...that's a bad idea. :)
>
> Cheers,
>
> Seona.
>
--
We take security very seriously. All outgoing mail is
certified Virus Free. To boost YOUR security visit
The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005
______________________________________________________________________
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/
