[TYPO3-english] TEXT content type and html lists

Christopher Torgalson bedlamhotel at gmail.com
Thu Oct 23 17:34:09 CEST 2008


Hi there,

On 23-Oct-08, at 8:19 AM, StephenBungert wrote:

>
> The designer wants the bullets to be one colour and the text another.
>
> When you change the color of the bullets you change the colour of  
> the text.
> I tired using an image as a bullet but the positioning of it was so
> different in different browsers that the designer doesn't want to  
> use that
> approach.


Cross-browser list-bullet positioning is easy--provided you make the  
image a background image (and NOT list-style-image). To do this, you'd  
typically remove all default padding and margins from the enclosing ul  
and redefine the list indent with either padding or margins. This  
ensures that different browsers all render the indent of the ul the  
same way.

Next, just add some amount of padding list items and position the  
bullets as background images. Your resulting css looks something like  
this:

ul {
	margin:0 0 1.5em 0;
	padding:0 0 0 1em;
}

li {
	background:transparent url(list-bullet.png) no-repeat 2px 6px;
	padding:10px;
}

The numbers, of course, should be adjusted to suit your particular  
needs :)

--
Christopher Torgalson
http://www.typo3apprentice.com/







More information about the TYPO3-english mailing list