This is perfectly possible to do with just CSS (2.1): ol.custom { list-style-type: none; margin-left: 0; } ol.custom > li { counter-increment: customlistcounter; } ol.custom > li:before { content: counter(customlistcounter) ” “; font-weight: bold; float: left; width: 3em; } ol.custom:first-child { counter-reset: customlistcounter; } Keep in mind that this solution relies on the :before pseudo-selector, … Read more
The CSS spec gives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn’t appear to work on IE7: <html> <head> <style> ol { counter-reset: item; } ol li { display: block; } ol li:before { content: counter(item) “. “; counter-increment: item; color: red; } </style> </head> <body> <ol> <li>item</li> … Read more
I’m not sure whether this is the best way to do it, but you could specify a negative text-indent: li { text-indent: -4px; } …where your HTML code looks like: <ul> <li>Item 1</li> <li>Item 2</li> </ul> (Tested in Safari 4.0.4 and Firefox 3.0.11.)
Have a container <div> with a class, and use the > selector. Lets say your container div’s class is “myclass”: .myclass ul li { …this will affect both levels of li. } .myclass > ul > li { …this will only affect the first level. } .myclass > ul > li > ul > li … Read more
If you are using MSTest, you may want to take a look at CollectionAssert.AreEqual. Enumerable.SequenceEqual may be another useful API to use in an assertion. In both cases you should prepare a list that holds the expected list in the expected order, and then compare that list to the result. Here’s an example: var studyFeeds … Read more
While you can use a :before pseudo-selector to add a “-” or “•” character in front of your element, it doesn’t really make your element behave like a bullet point. Your element may look like a bullet point, but that’s just a dirty hack, really, and should be avoided! To make your element both (1) … Read more
Yes you can use a div inside a li and it will validate. <!ELEMENT li %Flow;> <!ENTITY % Flow “(#PCDATA | %block; | form | %inline; | %misc;)*”> <!ENTITY % block “p | %heading; | div | %lists; | %blocktext; | fieldset | table”>
Add list-style-position: inside to the ul element. (example) The default value for the list-style-position property is outside. ul { text-align: center; list-style-position: inside; } <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Another option (which yields slightly different results) would be to center the entire ul element: .parent { text-align: center; } .parent > ul { display: inline-block; … Read more
:last-child is really the only way to do it without modifying the HTML – but assuming you can do that, the main option is just to give it a class=”last-item”, then do: li.last-item { /* … */ } Obviously, you can automate this in the dynamic page generation language of your choice. Also, there is … Read more
#menu li { padding: 0px; } #menu li a { margin: 0px; display: block; width: 100%; height: 100%; } It may need some tweaking for IE6, but that’s about how you do it.