Forums

acialk

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:

#custom-gen ul li:before {
	content: \"\00BB \0020\";
	}

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!

TheDoc

A background would do the trick.

You could also do something like >> which would give you ">>", or << which would give you "<<".

ikthius

"acialk" said:
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:
#custom-gen ul li:before {
	content: \"\00BB \0020\";
	}
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!

the » works .

if this is on its own, then put it in a span to style it

but if your using this in li, why not just tell the css not to use any list style, but add in that before the list items?
<li> » one</li>

acialk

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:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Footer',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

And this is what is in my footer:

    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar(Footer) ) : ?>
    <li>{static sidebar item 1}</li>
    <li>{static sidebar item 2}</li>
    <?php endif; ?>

Perhaps I'll be better off using an image and using the CSS background property.

acialk

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.

ikthius

"acialk" said:
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:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Footer',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
And this is what is in my footer:
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar(Footer) ) : ?>
    <li> &#187 {static sidebar item 1}</li>
    <li> &#187 {static sidebar item 2}</li>
    <?php endif; ?>
Perhaps I'll be better off using an image and using the CSS background property.

I amended your code for the li above, that should have worked

treehouse : what would you like to learn today?

Forums

List styling help - &#187