Grow your CSS skills. Land your dream job.

List styling help – &#187

  • # January 19, 2009 at 12:06 pm

    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!

    # January 19, 2009 at 12:40 pm

    A background would do the trick.

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

    # January 19, 2009 at 2:59 pm
    "acialk" wrote:
    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(&#187;) 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!

    the &#187; 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> &#187; one</li>

    # January 19, 2009 at 7:43 pm

    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:
    < ?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>‘Footer’,
    ‘before_widget’ => ‘
    ‘,
    ‘after_widget’ => ‘

    ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘,
    ));
    ?>

    And this is what is in my footer:

    Code:
    < ?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar(Footer) ) : ?>

  • {static sidebar item 1}
  • {static sidebar item 2}
  • < ?php endif; ?>

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

# January 19, 2009 at 8:51 pm

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.

# January 20, 2009 at 2:25 am
"acialk" wrote:
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:
< ?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>‘Footer’,
‘before_widget’ => ‘
‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

And this is what is in my footer:

Code:
< ?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(Footer) ) : ?>

  • &#187 {static sidebar item 1}
  • &#187 {static sidebar item 2}
  • < ?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

    Viewing 6 posts - 1 through 6 (of 6 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".