I suppose I have already answered this question myself, but the solution which I derived seems rather clumsy, so I am consulting the experts here.
I am trying to style a list as a vertical menu. I want to use the standard CSS bullets, and not any graphical or custom element. Because there will be a hover state, as well as other styling issues LIs WILL CONTAIN BLOCK ELEMENTS, or inline elements with display set to block. Something like this
<li><a href="#">this anchor is displayed as a block</a></li>
<li><p>more block content</p></li>
The intuitive solution would be to set list-position:inside. Works in Safari, but FF clears the element with display block. That is, the bullet appears on it's own line!? Experimenting with floating the contained elements leads to a rather odd behaviour. float:left causes the element to be displayed BEFORE the bullet... as if the bullet was an element with float:left, but one that came AFTER floated the contained elements of the LI in the source order... Float:right width:100% puts the bullet on it's own line again .. this makes sense since I made the contained element 100% width.
I was abale to accomplish the effect I wanted only by setting the list-style-position: outiside and adjusting the padding and margin on the contained elements. this of of course defeats the purpose of my experiment.
Simply put, my questions are:
1) Is there a way to use list-style-position: inside; on LI that contain block objects ( and have it display consistently cross-browser)??
2) If not, what would the practical use of the list-style-position: inside; attribute be?
3) Out of curiosity, is there a way to alter the attributes of the rendered list bullet? IE.. float it, position it.. etc?