This works good for ie and firefox
ul {
padding-left:1em;
margin-left:5px;
}
li {list-style:square;font-size:8pt;margin:0;padding:0;color:#000000;}
li a{font-size:8pt;text-decoration:none;}
#leftnav ul.sel1 { margin:0px 0px 0px 10px; padding: 0px 0px 0px 0px; }
#leftnav ul.sel2 { margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
#leftnav li {margin:0px 0px 0px 10px; padding: 0px 5px 0px 2px; list-style:square; }
#leftnav li a.sel1:link{color:teal;}
#leftnav li a.nsel1:link{color:#000000;font-size:8pt;}
#leftnav li.sel1{color:teal}
#leftnav li.nsel1{color:#000000;}
#leftnav li.sel2{color:teal}
#leftnav li.nsel2{color:#000000;}
5.6.3 ‘list-style-type’
Value: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial: disc
Applies to: elements with ‘display’ value ‘list-item’
Inherited: yes
Percentage values: N/A
This property is used to determine the appearance of the list-item marker if ‘list-style-image’ is ‘none’ or if the image pointed to by the URL cannot be displayed.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
5.6.4 ‘list-style-image’
Value: <url> | none
Initial: none
Applies to: elements with ‘display’ value ‘list-item’
Inherited: yes
Percentage values: N/A
This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the ‘list-style-type’ marker.
UL { list-style-image: url(http://png.com/ellipse.png) }
5.6.5 ‘list-style-position’
Value: inside | outside
Initial: outside
Applies to: elements with ‘display’ value ‘list-item’
Inherited: yes
Percentage values: N/A
The value of ‘list-style-position’ determines how the list-item marker is drawn with regard to the content. For a formatting example see section 4.1.3.
5.6.6 ‘list-style’
Value: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Initial: not defined for shorthand properties
Applies to: elements with ‘display’ value ‘list-item’
Inherited: yes
Percentage values: N/A
The ‘list-style’ property is a shorthand notation for setting the three properties ‘list-style-type’, ‘list-style-image’ and ‘list-style-position’ at the same place in the style sheet.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Setting ‘list-style’ directly on ‘LI’ elements can have unexpected results. Consider:
<STYLE TYPE=”text/css”>
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all ‘LI’ elements and only ‘lower-alpha’ list styles will be used. It is therefore recommended to set ‘list-style’ only on the list type elements:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
In the above example, inheritance will transfer the ‘list-style’ values from ‘OL’ and ‘UL’ elements to ‘LI’ elements.
A URL value can be combined with any other value:
UL { list-style: url(http://png.com/ellipse.png) disc }
In the example above, the ‘disc’ will be used when the image is unavailable.
<hr>
Inline
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
swd example
li.product_nav_swd {display:inline;}
li.product_nav_swd:after{content:’#·’; margin:0 10px;}
</style>
</head>
<body>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
</body>
</html>