«

Playing with <ul> and <li> tags, I came across some strange behavior
(at least with IE6, didn't try other browsers):

1.
I can set a fixed size for the text of the list entries (via
style="font-size:10pt"), but I cannot set a fixed size for the disc bullet
symbol. How can I make the symbol stay at a fixed size (regardless of the
browser's font size setting)?

2.
I did not find a working way of *reducing* the distance between the disc
bullet symbol and the text. While I can easily *expand* the distance over
the default value via style="padding-left:20px", how can I reduce it?

I did not find anything about that in a couple of online resources.
Maybe I was just too blind?

Jens

Jens Lenge wrote:
> Playing with <ul> and <li> tags, I came across some strange behavior
> (at least with IE6, didn't try other browsers):
>
> 1.
> I can set a fixed size for the text of the list entries (via
> style="font-size:10pt"), but I cannot set a fixed size for the disc
> bullet symbol. How can I make the symbol stay at a fixed size
> (regardless of the browser's font size setting)?

Don't use pt or px for fonts. IE users won't be able to resize the text.
Imagine how frustrated you would be if you had poor eyesight and discovered
that the author of a site you were visiting had not only used tiny text but
deliberately made you unable to resize it.

You can make the bullet stay a set size however.

Make your own bullet in a paint program and in your CSS Use:

list-style-image: url(bullet.gif);

> 2.
> I did not find a working way of *reducing* the distance between the
> disc bullet symbol and the text. While I can easily *expand* the
> distance over the default value via style="padding-left:20px", how
> can I reduce it?

<style type="text/css">
li span
{
margin-left: -0.5em;
}
</style>
<ul>
<li><span>Blah</span></li>
</ul>

In alt.html Jens Lenge said:

> I can set a fixed size for the text of the list entries

you only think you can

> (via style="font-size:10pt")

use % to specify font sizes

> but I cannot set a fixed size for the disc bullet

use an image

> I did not find a working way of *reducing* the distance between the disc
> bullet symbol and the text.

li{list-style-type:none;}
li:before{content: url(dot.png);}
span{padding-left:2ex;}

<li><span>blah</span>

dot.png will be 2ex to the left of 'blah'

not supported by IE


--


v o i c e s

>> I can set a fixed size for the text of the list entries
> you only think you can

I definitely can - it works perfectly.
I suppose you mean I shouldn't (just as Nik said)?

> use % to specify font sizes

BTW, as you mention it: Where can I find a table that lists wich % sizes are
equal to 12pt, 10pt in "normal" (middle) text size setting?

>> but I cannot set a fixed size for the disc bullet
> use an image

Sure, that works, but IMO is rather a workaround than a solution.
So there is no way to influence the size of a non-graphic bullet (neither by
a % value nor by a fixed value)?

> li{list-style-type:none;}
> li:before{content: url(dot.png);}
> span{padding-left:2ex;}
> <li><span>blah</span>
> dot.png will be 2ex to the left of 'blah'
> not supported by IE

Well, IE is what the majority of users uses (although it is not really a
nice program)...

Bye, Jens

In alt.html Jens Lenge said:

>>> I can set a fixed size for the text of the list entries
>> you only think you can

> I definitely can - it works perfectly.

no you cant

> I suppose you mean I shouldn't (just as Nik said)?

no, read my lips *you can not fix a font size, you only think you can*

> BTW, as you mention it: Where can I find a table that lists wich % sizes are
> equal to 12pt, 10pt in "normal" (middle) text size setting?

it doesn't work like that. 100% is the default size the visitor has for
their browser. it can be any size.


--


v o i c e s

"Jens Lenge" <> wrote in message
news:cl9ao4$atb$04$...
> Playing with <ul> and <li> tags, I came across some strange behavior
> (at least with IE6, didn't try other browsers):
> 2.
> I did not find a working way of *reducing* the distance between the disc
> bullet symbol and the text. While I can easily *expand* the distance over
> the default value via style="padding-left:20px", how can I reduce it?
>
> I did not find anything about that in a couple of online resources.
> Maybe I was just too blind?

The HTML specs allow different user agents to implement list indenting and
bullet positioning differently. So you would need different CSS for
different browsers.

For example, for one site I use:

For current Gecko-based browsers:
ul li { margin:0 0 0 -0.5em; }

For IE6:
ul li { margin:0 0 0 2em; }

For IE5:
ul li { margin:0 0 0 2em; }

For IE4:
ul li { padding:0 0 0 2.5em; }

For Opera 7:
ul li { margin:0 0 0 2em; }

For your website, you might have to set different values for the margin
and/or padding, depending on what you want.

Jens Lenge wrote

> >> I can set a fixed size for the text of the list entries
> > you only think you can
>
> I definitely can - it works perfectly.

Definitely can not.

Use any browser other than IE. They all allow the viewer to change the font
size.

Use IE with the accessibility options set to ignore author font size.

> > use % to specify font sizes
>
> BTW, as you mention it: Where can I find a table that lists wich % sizes
are
> equal to 12pt, 10pt in "normal" (middle) text size setting?

Don't even bother. Just leave it at 100%.

This, by the way, is what your viewer has chosen as best for their
system/eyes. If you specify anything else then you are being rude to your
viewer by saying "I know better than you how big the font needs to be for
you to read it". Sure way to loose viewers.

--
Cheers
Richard.

On Fri, 22 Oct 2004 00:52:24 +0200, Jens Lenge <>
declared in alt.html:

[fixed font sizes)
> I definitely can - it works perfectly.

Depends on your definition of perfectly. The user can still override it.

> I suppose you mean I shouldn't (just as Nik said)?

That too.

> BTW, as you mention it: Where can I find a table that lists wich % sizes are
> equal to 12pt, 10pt in "normal" (middle) text size setting?

You can't.

> Sure, that works, but IMO is rather a workaround than a solution.
> So there is no way to influence the size of a non-graphic bullet (neither by
> a % value nor by a fixed value)?

No.

>> li{list-style-type:none;}
>> li:before{content: url(dot.png);}
>> span{padding-left:2ex;}
>> <li><span>blah</span>
>> dot.png will be 2ex to the left of 'blah'
>> not supported by IE
>
> Well, IE is what the majority of users uses (although it is not really a
> nice program)...

list-style-image: url(dot.png);

Like here: http://clarkecomputers.com.au/software/rtpage.php

--
Mark Parnell
http://www.clarkecomputers.com.au
"Never drink rum&coke whilst reading usenet" - rf 2004

> For your website, you might have to set different values for the margin
> and/or padding, depending on what you want.

Oh wow. Not really what I wanted to hear.
But thanks anyway.

Seems I can forget about having a truly exact list layout that works for all
major browsers withour browser-specific tweaking...

> no, read my lips *you can not fix a font size, you only think you can*

Okay, you win. ;o)
After reading the other posts, I know what you mean.

But how on earth can I then make a layout to fit into different
sections/blocks with fixed size and position each when I cannot exactly set
a font size? I imagine browsers do NOT automatically also enlarge fixed
widths and heights when they enlarge the fixed font size, right?

BTW - Wouldn't it generally be a better approach to have a truly exact
(pixel-based) layout for all items including text and then enable browsers
to enlarge the total layout instead of just font sizes? I know this is not
how HTML/CSS work, but I like the idea...

> it doesn't work like that. 100% is the default size the visitor has for
> their browser. it can be any size.

Ok, got it.