3 replies [Last post]
cwd1
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2007-02-07
Posts: 3
Points: 0

I'm using a list-style-image as follows:

#content ul li { list-style-type: square; list-style-image: url(/images/black_bullet.gif); font-size: small; margin-bottom: .75em; }

The code that's displaying it is benign:

  • A list item.
  • Another list item.

The bullet is 10px square. This works in FF/Mac, IE6/Win, but in Safari, it does not. What happens in Safari is that the image does not appear unless you force a redraw, either by resizing the window or selecting/deselecting text.

Has anyone else seen this problem?

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Use background-image

Use background-image instead, it has better support and allows greater positioning.

Verschwindende wrote:
  • CSS doesn't make pies

cwd1
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2007-02-07
Posts: 3
Points: 0

Solved: list-style-image in Safari

As much as it hurts, I took the suggestion to use a background-image instead. Here is the resultant code that works in Safari, IE6/Win FF/Mac, and FF/Mac.

#content ul { list-style-type: none; padding: 0; margin: 0; } #content ul li { background-image: url(/images/black_bullet.gif); background-repeat: no-repeat; background-position: 0 .4em; padding-left: 1.4em; font-size: small; padding-bottom: .75em; }

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Why do you say "hurts"? Do

Why do you say "hurts"? Do you have an issue with using a background image? It's probably what any of us would have suggested.

Verschwindende wrote:
  • CSS doesn't make pies