Is there a way to get a filled triangle pointing to the right for my bullet point in an <UL>??
Debbie
Maybe not the most elegant solution, but you get the idea:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<style type="text/css">
ul {
list-style: none;
}
ul li:before {
content: "\\25BA \\0020";
}
</style>
</head>
<body>
<ul>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ul>
</body>
</html>
What is that supposed to do?
Debbie
It gives you a UL list with each item marked with a right-pointing triangle instead of a round bullet. Isn’t that what you wanted?
It works in FF, Chrome, IE9, and IE8, but not IE7.
Yes, can you explain what you did?
Debbie
The list-style:none turns off the regular bullet list styles (circle, disk, square, etc. - there are about a dozen pre-defined styles).
Then the li:before tells it to put a Unicode \25BA character (the triangle) and a space (the \0020) before each list item.
If you need IE7 compatability, however, I think the only way to get there is by creating a little graphic file with the triangle in it, and doing:
ul {
list-style-image:url("/graphics/triangle.gif");
}
In that case, you’d just leave the li alone, with no li:before.
Someone else may have a better workaround for IE7. The problem is that IE7 doesn’t recognize li:before at all.
It’s also possible to create an arrow with css, and then with the use of :before adding it to the list items.
ul {
list-style: none;
}
ul li:before {
display: inline-block;
width: 0;
height: 0;
border-top: solid transparent;
border-bottom: solid transparent;
border-left: solid #f00;
border-width: 5px;
content: ' ';
margin-right: 5px;
}
We position a 0x0 inline-block before every list item, 0x0 because the arrow is formed from borders, inline-block so we can set it to 0x0 without having the list item text start on a new line.
If you want to adjust the arrow size, change border-width.
If you want to adjust the arrow color, change the color value in border-left.
The problem with this method however, is the lack of IE7 support for :before. You could either make seperate divs for the arrows or resort to a different method.
If you want to manually create the divs for the arrows, make sure you add the following lines for inline-block support within IE:
zoom:1;
*display:inline;
Using the border method mentioned above we can get a version working back to ie6 by adding an inner element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
list-style: none;
margin:0;
padding:0;
}
ul li b {
border-top:5px dashed transparent;
border-bottom:5px dashed transparent;
border-left:5px solid #f00;
height:0;
width:0;
display:inline-block;
margin:0 5px 0 0;
vertical-align:baseline;
overflow:hidden;
}
</style>
</head>
<body>
<ul>
<li><b></b>First thing</li>
<li><b></b>Second thing</li>
<li><b></b>Third thing</li>
</ul>
</body>
</html>
(Use a span if you don’t like my mis-use of the b element)
Paul O’B, I thought you needed to add:
zoom:1;
*display:inline;
For inline-block to work in IE, did they fix this, did I miss something, or what is going on? 
You are half right 
For elements that are natively inline (such as spans, b etc) then IE understands inline-block ok and doesn’t need any hacks.
IE7 and under don’t understand inline-block when applied to block elements though and in those cases you need to add the fix you mentioned above.
Basically you set the block element to be display:inline and then trigger haslayout with zoom as you mentioned.
As an aside it is probably the case that IE doesn’t really understand inline-block as such but it is used as a trigger for haslayout and it seems that inline elements with haslayout behave exactly like inline-block (probably a throwback to ie5 which allowed inline elements to have dimensions applied natively).
However you can’t use inline-block and display:inline in the same rule for block elements because one cancels the other out.
Ah, seems logical enough.
Time to go remove some lines of css where they aren’t needed!
Thanks Koko and Paul!!
Debbie