Understanding list-style-position

HTML & CSS
1

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
<ul>
<li><a href=“#”>this anchor is displayed as a block</a></li>
<li><p>more block content</p></li>
</ul>

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?

2

BRILLIANT!
I think I was going towards that but didn’t know how to make just the first element become inline.

3

Hi,

When you set list-style:inside then the bullet gets treated as an inline element so you should follow with inline content for the first line of content. After that you can have block elements as required.

Usually you would want the list bullet outside because when text wraps you don’t usually want it to wrap under the bullet.

We could fix the behaviour in Firefox with some advanced css as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p,li {
    margin:0 0 1em
}
ul {
    margin:0;
    padding:0;
    width:300px
}
ul.test2 {
    list-style:inside;
}
ul.test2 li *:first-child {
    display:inline;
}
ul.test2 li *:first-child + *{margin:1em 0}
</style>
</head>
<body>
<ul class="test2">
    <li>
        <p>Some content goes here : Some content goes here : Some content goes here : Some content goes here : Some content goes here : </p>
        <p>Second test</p>
        <p>Third test</p>
        <p>Fourth test</p>
    </li>
    <li>
        <p>Some content goes here : Some content goes here : Some content goes here : Some content goes here : Some content goes here : </p>
    </li>
    <li>
        <p>Some content goes here : Some content goes here : Some content goes here : Some content goes here : Some content goes here : </p>
    </li>
</ul>
</body>
</html>

Effectively it makes the first child of the list into an inline element and then makes sure the second child has a top margin to keep things even.