[thelist] CSS Background Color Problem

[Geoff Sheridan]

At 2:02 pm +0000 27/4/04, david.landy at somerfield.co.uk wrote:
>li{background-color: blue;}
>the above css paints the background colour all the way over to the right
>margin of each list element, though the text does not go that far. This
>looks a bit weird. Is there any way to change this other than wrapping the
>text in another element?

No, li is a block element and has a width of 100%, unless otherwise stated.
Inline and it will shrink-wrap:
li{background-color: blue; display:inline;}
but there will not be a line break - you'd need to put <br />s in your html.

Or you could apply a fixed width:
li{background-color: blue; width:40px;}

Or use em units so that it scales with text size:
li{background-color: blue; width:6em;}

Geoff
-- 
-------------------------------------------------------
Premonition Design Ltd
http://www.premonition.co.uk/
East London, UK