How to Restore The "Auto" Values for List-Style-Type in Nested Unordered Lists

How can I restore the auto values for list-style-type in nested unordered lists?

use classes to write for something like:

ul { list-style-type: none; }
.list_default { list-style-type: circle; }

and then on the ul you want to apply bullets to,

<ul class="list_default">
<li>one</li>
<li>two</li>
</ul>

Also, please do take other posters advice when it comes to not using "auto" behaviors. There are so many proprietary extensions to the standard and manufacturer-defined defaults that will just make you pull your hair out later. Develop the good habit now of not depending on their sanity.

Reset css list count and style when nested

If you want the li styles to only apply to the li directly under the ol.step use the direct descendant CSS selector:

ol.step > li:before {
content: counter(li);
counter-increment: li;
font-size: 200%;
font: Arial;
position: absolute;
left: -20px;
padding-top : 1px;
}

ol.step > li{
display: block;
position: relative;
padding-left : 10px;
padding-top : 1px;
}

Ordered List (ol) showing up un-numbered?

It's going to be a CSS issue. CSS can change the numbering/bullet style, and even turn it off altogether. Using Firebug, inspect the element and look at the CSS styles on the right to see what styles are being applied to it. Look for one called list-style.

What is default list styling (CSS)?

I used to set this CSS to remove the reset :

ul { 
list-style-type: disc;
list-style-position: inside;
}
ol {
list-style-type: decimal;
list-style-position: inside;
}
ul ul, ol ul {
list-style-type: circle;
list-style-position: inside;
margin-left: 15px;
}
ol ol, ul ol {
list-style-type: lower-latin;
list-style-position: inside;
margin-left: 15px;
}

EDIT : with a specific class of course...

Formatting an indented list in CSS

You would do like so:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested2

And style the <li> elements not to have a bullet if you like.

How can you create a cross browser css menu that doesnt require you to provide a style for EVERY LEVEL of the menu

you should be able to do it by only specifying down to the second level

<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
<li>test1
<ul class="mnusub">
<li>test2</li>
<li>test11
<ul class="mnusub">
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</li>
</ul>
</li>
<li>test5
<ul class="mnusub">
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
<li>test10</li>
</ul>
</body>
</html>

The key here is the ">" selector as it specifies direct descendants and not sub-descendants

enjoy

Unicode character as bullet for list-item in CSS

EDIT

I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:

li:before {
content: "\2605";
}

OLD ANSWER

I'd probably go for an image background, they're much more efficient versatile and cross-browser-friendly.

Here's an example:

<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

HTML / CSS : Reset List Padding to Default

The point of a reset is to eliminate variations due to browser defaults. In other words, there is no definitive way to "unreset" because different browsers may have different defaults.

However, you can choose your own default values, and I think that's what you're trying to do here.

A good way to do this is to look at a browser's default stylesheet (you should be able to find how to do this by doing a search). For example, you can see the Firefox default stylesheet with this URL: resource://gre/res/html.css

How to convert string representation of list to a list

>>> import ast
>>> x = '[ "A","B","C" , " D"]'
>>> x = ast.literal_eval(x)
>>> x
['A', 'B', 'C', ' D']
>>> x = [n.strip() for n in x]
>>> x
['A', 'B', 'C', 'D']

ast.literal_eval:

With ast.literal_eval you can safely evaluate an expression node or a string containing a Python literal or container display. The string or node provided may only consist of the following Python literal structures: strings, bytes, numbers, tuples, lists, dicts, booleans, and None.



Related Topics



Leave a reply



Submit