I am having problems with the list-style-position and list-style attributes.
What I need is a stand alone <li> (don't want the container because of the default margins) to show the list marker then if text overflows it does not flow under the list marker.
According to my reference (o'Reilly's Dynamic HTML the definitive reference) the style for doing this should look like:
LI {list-style-type: square; list-style-position
utside;}
or
LI {list-style: square outside none;}
I have tried applying both of these styles to either a <li> or <ul> tag. As soon as I add the list-style-positionutside; to the first style, the tag renders effectively as a span tag (no square or indentation) and the second example always renders as if it were a span tag (even when assigned to the <UL> it removes the margins).
Help!!!!!make sure your html is valid (<!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m -->), then make sure your css is valid (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->). After that is done, all you need is list-style-type:square. positionutside is the default, so you shouldn't have to define that.Keep your list inside the UL tag and use CSS to adjust the margins and padding as needed. Try something like:
ul {
padding-left: .6em;
margin: 0 0 0 .6em;
}
Then leave the LI tags alone. The reason for using padding and margins is because IE and Standards browsers use different methods of pushing the list content past the list marker. So using both gets around the whole problem.
But again, an LI tag outside a UL or OL tag is meaningless. Keep them inside and adjust the UL or OL tags as needed using CSS.that worked, thanks
What I need is a stand alone <li> (don't want the container because of the default margins) to show the list marker then if text overflows it does not flow under the list marker.
According to my reference (o'Reilly's Dynamic HTML the definitive reference) the style for doing this should look like:
LI {list-style-type: square; list-style-position
utside;}or
LI {list-style: square outside none;}
I have tried applying both of these styles to either a <li> or <ul> tag. As soon as I add the list-style-position
utside; to the first style, the tag renders effectively as a span tag (no square or indentation) and the second example always renders as if it were a span tag (even when assigned to the <UL> it removes the margins).Help!!!!!make sure your html is valid (<!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m -->), then make sure your css is valid (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->). After that is done, all you need is list-style-type:square. position
utside is the default, so you shouldn't have to define that.Keep your list inside the UL tag and use CSS to adjust the margins and padding as needed. Try something like:ul {
padding-left: .6em;
margin: 0 0 0 .6em;
}
Then leave the LI tags alone. The reason for using padding and margins is because IE and Standards browsers use different methods of pushing the list content past the list marker. So using both gets around the whole problem.
But again, an LI tag outside a UL or OL tag is meaningless. Keep them inside and adjust the UL or OL tags as needed using CSS.that worked, thanks