html-lists

I have a UL LI menu that I am turning into a select dropdown when you're viewing it on a mobile. I want to now indent child items e.g List item 1 -- Child item 1 ---- Child Child item 1 -- Child item 2 List item 2 Rather than listing in one single line. I'm happy to just add nbsp to keep things easy - or add classes and CSS if more suitable. The code I am currently using to generate the select is: $("<select />").appendTo("#primary-nav"); $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("#primary-nav select"); $("#primary-nav a").each(function() { var el

setting overflow and text-overflow property makes the li hide bullets. I've tried putting the bullets "inside" but it still didn't show bullets. Plus I'd prefer to put it "outside" ul.hbox_poplist { list-style: circle url('/img/bpt_clear.png'); } ul.hbox_poplist li { margin: 0 0 8px; max-height:32px; text-overflow: ellipsis; overflow-y: hidden; } does anyone know any solution to this? Using a CSS background is much more dependable across browsers than using list-style-image for custom bullets. Controlling the position of a list-image is quite difficult on its own. Something like: .bullets {

I am not really that familiar with jquery or javascript and I need a quick solution to my problem that is why im posting it here. Below is a sample html snippet: <ul> <li><input type="checkbox" />Administration <ul> <li><input type="checkbox" />President <ul> <li><input type="checkbox" />Manager 1 <ul> <li><input type="checkbox" />Assistant Manager 1</li> <li><input type="checkbox" />Assistant Manager 2</li> <li><input type="checkbox" />Assistant Manager 3</li> </ul> </li> <li><input type="checkbox" />Manager 2</li> <li><input type="checkbox" />Manager 3</li> </ul> </li> <li><input type=

I wanted to create colored list-markers for <ul> and I did it, but in all lists now the list-style-position attribute does not works. Here is the code: ul.FirmStyle { list-style-type: none; } ul.FirmStyle li:before { color: orange; content: "▪"; list-style-position: outside; /* !!!!!! */ margin-left: 10px; } <ul class="FirmStyle"> <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li> <li>Text</li> </ul> Why? As per W3C Specs , the list-style-position property controls the positioning of the marker pseudo element in the list item. list-style-position This

Seems like a simple thing to do (although im still learning the ins and outs of jQuery). Here's my HTML: <div id="fbsignup"> <div class="message messageerror"> <strong>There were errors with your registration:</strong> <ul></ul> </div> </div> Here's my (attempted) jQuery: // Check Required Fields. $('#fbsignup input.required').each(function () { if ($(this).val().trim() == '') { $(this).next('em').html('*').show(); $('#fbsignup .message ul').add('li').html('Fields marked with * are required.'); } }); And this is what it is doing to the DOM: <div class="message messageerror"> <strong>There were

I want to know how to add text-shadow to an ordered list </ol> . I've tried, the following example but it doesn't work. body { text-shadow: black 0.1em 0.1em 0.2em; color: gray; background: white; } ol { text-shadow: black 0.1em 0.1em 0.2em; } Ordered Lists <ol> <li>content</li> <li>content</li> <li>content</li> </ol> My issue it tahe the list counter doesn't have the text shadow . I need to add text shadow to the number in the ordered list, like the 1. , or 2. , etc. By the way, I want it to still retain like a list style where the content is indented before the number. If you also want to