List styling help – &#187

[Historical Forums User]

Hey there,

I was looking on a list apart and I seen this article :

http://www.alistapart.com/articles/taminglists/

Does anyone know how I can apply the two little right arrows(») so that it’ll show across all browsers?

In the article the author used the following CSS:

Code:

#custom-gen ul li:before {
content: “0BB 020”;
}

Which as you’ve probably guessed IE doesn’t understand. And, it’s purely used for presentation so you shouldn’t really be inserting this directly into the html? Seeing as it was written in 2002 I guess that was the least of their worries.

Anyhow, I love the effect and I’m trying to think of the best route to use. I guess images and apply them as backgrounds on the list items?

What do you reckon?

P.S. I’m using WordPress!

[Historical Forums User]

I’m using WordPress and I’m styling a dynamic footer. The content is generated through PHP so I would need to figure out how to add &#187 right after it spits out the opening list item <li>.

I’m using this for the dynamic footer:

Code:

‘Footer’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

And this is what is in my footer:

Code:

[Historical Forums User]

If anyone is interested here’s the solution I settled for:

http://css.maxdesign.com.au/listutorial/master.htm

I had some problems choosing the right image type. I settled for gif in the end, it had the smallest file size plus I decided not to have a transparent background due to ie6. I may change this when I’ve check out the PNG fix.

The previous option I was trying to figure out using was more hassle than it was worth. Plus it involved adding unnecessary markup.

Thanks for the help people.

[Author]

Posts