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?
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>
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 » right after it spits out the opening list item <li>.
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.
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 » right after it spits out the opening list item <li>.
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!
You could also do something like >> which would give you ">>", or << which would give you "<<".
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>
I'm using this for the dynamic footer:
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.
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.
I amended your code for the li above, that should have worked