Using images as bullets

HTML & CSS
1

I have a list of bulleted items under “Latest Forum Threads” found here: http://www.aminoacidsupplement.org/

How can I turn the bullet points into images?

In an ideal world I would like them styled to look similar to the four thumbnail items above the Latest Forum Threads section. The image will be the same each time.

I’ve tried using: list-style-image: url(http://www.aminoacidsupplement.org/wp-content/uploads/2011/02/whatisforum1.jpg);

But it doesn’t even show the whole image and its not aligned correctly.

Anyone know what to do here?

Thanks,

Jon

2

List-style-image sucks – cross browser it is so horribly broken you cannot rely upon it.

The BEST way I’ve found to deal with it is to turn bullets off with list-style:none on your UL, then on each LI pad the left side, and put a background-image no-repeat aligned “left center” for single lines or “left top” for multiple lines – poof, there are your images appearing to look like bullets.

I was going to say that with dynamic sized fonts for accessibility that approach can have some problems – but since you appear to have declared all your fonts in the total miserable accessibility /FAIL/ of absurdly undersized PX, that shouldn’t be an issue.

Though it is something you should consider fixing, so users like myself aren’t diving for the zoom or just saying “to heck with it” and bouncing to some other website. WCAG recommendations exist for a reason after all… but one can’t expect too much when the page is deployed in HTML5 some decade before it’s ready (not that it actually seems to USE anything HTML5), endless wrapping div, ID’s and classes for nothing across the entire page, jquery bloat, clearing DIV’s like it was 1998, fixed width layout that’s a crappy little stripe at 1920 wide and useless side-scrolling on netbooks, and a whopping 24k of markup being wasted on delivering 4.3k of plaintext. You’d almost think the page was built in Wordpress.

Just saying – there’s a LOT that needs to be fixed on that page to make it actually USEFUL to visitors.

3

I’ve tried with the following but its not quite working. I am a beginner css guy!

.homepage_forumposts {
width: 600px;
}

.homepage_forumposts ul {
margin: 0 20px;
    padding: 0 20px;
    list-style: none;
}

.homepage_forumposts li {
  padding: 0 0 0 20px;
   background: url(http://www.aminoacidsupplement.org/wp-content/uploads/2011/02/whatisforum1.jpg) 5px no-repeat;
}

Can you see what I have done wrong?

4

Well, your positioning is wrong since 1) you are REQUIRED to specify BOTH directions of positioning, so “5px” is incorrect, you should be saying “5px 5px” if that’s what you are trying to do – which is why I prefer the NAMED positionings…

But from there I’m pretty sure your images are wider than 20px, I don’t think you want the padding on the UL…

remember, the image is going INSIDE the LI, not outside it, so you have to pad the width of the image PLUS any extra you want.

… and I have no idea why the list-style is being ignored and it’s still showing bullets, unless that’s a specificity issue and it’s inherting from some other element or declaration.

In fact looking at your CSS I’m surprised you aren’t seeing more mis-renders like that, the specificity chain is all over the place… much of that stemming from a nasty case of “Not every ejaculation deserves a name” – which is to say not every element should be having a class thrown on it, and if you style off a ID that will trump classes inside it.

… and some formatting on the HTML in question wouldn’t hurt, at least during debugging. It would take me an hour to format that code into something useful before I could even TRY to make sense out of it.

Though the rubbish markup being shoved down your throat by turdpress likely isn’t helping.

5

Working now. I used:

.homepage_forumposts ul li {
    list-style: none;
}