It’s not valid markup at all. If it gets displayed correctly, it’s only a matter of luck. As you seem to define dangerous by “break in browsers for the end user’s ability to view the page as intended”, then yes it’s dangerous. Browsers are trying their best to compensate for invalid markup but there is … Read more
If you still want to show the item but make it not clickable and look disabled with CSS: CSS: .disabled { pointer-events:none; //This makes it not clickable opacity:0.6; //This grays it out to look disabled } HTML: <li class=”disabled”>Disabled List Item</li> Also, if you are using BootStrap, they already have a class called disabled for … Read more
li only gets its list-style-related styles applied if it has display: list-item
You’ll want to use list-style-position: ul { list-style-position: inside; }
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
I’m using ideas that @Spudley has in his answer, and I’m using ideas from a previous answer I wrote: How to use CSS to surround a number with a circle? See: http://jsfiddle.net/j2gK8/ IE8 does not support border-radius, and workarounds like CSS3 PIE do not work with :before. And, older browsers like IE7 do not support … Read more
This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/ (or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/) This won’t work in IE7. #horizontal-style { display: table; width: 100%; /*table-layout: fixed;*/ } #horizontal-style li { display: table-cell; } #horizontal-style a { display: block; border: 1px solid red; text-align: center; margin: 0 5px; background: #999; } … Read more
I think the bullets are there, but they’re being rendered to the left of the viewing area. Try: list-style-position: inside;
To center a row of blocks, you should use inline-block: ul.menu { display: block; text-align:center; } ul.menu li { display: inline-block; } IE doesn’t understand inline-block, but if you set it inline just for IE, it’ll still behave as an inline-block: <!–[if lt IE 8]> ul.menu li { display: inline } <![endif]–>
To remove from all ul-s on the page the li-s that are neither the first nor the last: $(‘ul li:not(:first-child):not(:last-child)’).remove(); Or using a specific id: $(‘#yourul li:not(:first-child):not(:last-child)’).remove(); If you have a jQuery object with your ul in it: $(yourul).find(‘li:not(:first-child):not(:last-child)’).remove();