list formatting

[Jens Lenge]

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

 

[Nik Coughin]

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>

 

[brucie]

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

 

[Jens Lenge]

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?

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

 

[brucie]

In alt.html Jens Lenge said:

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.

 

[C A Upsdell]

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.

 

[rf]

Jens Lenge wrote

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.

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.

 

[Mark Parnell]

[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.


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

 

[Jens Lenge]

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...

 

[Jens Lenge]

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.

 

[Sid Ismail]

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

Maybe this'll help:
http://www.elsid.co.za/download/css_fontsizes.htm

Sid

 

[rf]

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?

You don't. You build a page where it does not matter what the font size is,
or what the window size is, or what colour your viewers eyes are. This means
you do *not* allocate little fixed sized bits of canvas and expect the text
to stay in there. It won't. You write the text and then, if you must, you
allocate a variable sized area that adjusts itself to the size of the text.

If you do allocate fixed sized bits then somebody *will* change their font
size and your page *will* become unusable for them.

And when you do allocate that fixed sized bit have you tested that that bit
fits onto a telephone screen?

A web page is not a peice of paper, you do not use desktop publishing
techniques.

I imagine browsers do NOT automatically also enlarge fixed
widths and heights when they enlarge the fixed font size, right?

Some of them do with some things. Some of them do not.

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?

Opera does this. I don't like it.

 

[brucie]

In alt.html Jens Lenge said:

Okay, you win. ;o)

YAY! what? what? money? sex? drugs? a blue balloon?

But how on earth can I then make a layout to fit into different
sections/blocks with fixed size

'fixed size' is not a natural state for this medium.

and position each when I cannot exactly set
a font size?

build into your design a reasonable amount of flexibility to take into
account different visitors settings.

I imagine browsers do NOT automatically also enlarge fixed
widths and heights when they enlarge the fixed font size, right?

they can. it depends on the units you use. for example ex and em

BTW - Wouldn't it generally be a better approach to have a truly exact
(pixel-based) layout

it sounds like you would be much happier in the print industry.

for all items including text and then enable browsers
to enlarge the total layout instead of just font sizes?

imagine you have poor eyesight. you zoom the page so you can read it.
your page is now virtually 10 meters by 10 meters and you have to scroll
around all those meters to read the page on a 20 centimeter screen.

just enlarging the fonts is much more convenient although operas zoom
function works by zooming everything but it gives you font control so
you don't need it to read a site.

 

[rf]

Not a good idea.

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

Yes. You can forget about having truly exact (ie pixel perfect) layout for
anything. It wont' happen. Ever.

The specifications state that it is up to the IA (the browser) how it
renders a list. So, we have the case where every browser is slightly
different.

So what? It's still a list.

If you "tweak" the list so all browsers are convinced to display it exactly
as *you* think it should be displayed then it is going to be different for
many people. People are used to their browsers. They are used to the way
their browser displays a list. If you *tweak* it away from this then they
might think "Hmmm, that's odd, that list doesn't look right. I wonder if
this site is broken <viewer wanders off/>".

Bottom line: Don't worry about it. Get on with putting some more content on
your page.

 

[Wÿrm]

YAY! what? what? money? sex? drugs? a blue balloon?

Maybe drugged sex for a money in (with?) a blue balloon?

<snip>

 

[brucie]

In alt.html Neal said:

I could use a loose visitor, my girlfriend's in Cancun for 3 days...

i thought you had my phone number?

 

[Neal]

Sure way to loose viewers.

I could use a loose visitor, my girlfriend's in Cancun for 3 days...

 

[Neal]

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?

Mostly right. Soooooooo.......

Use ems for widths when necessary, or leave them alone when you can, and
allow heights to work out based on the amount of content! Yay!

In other words: in print, if the font is too small, what do you do? You
bring the paper closer to your eyes. But we really can't expect the user
to either get closer to the screen or to bring the screen closer to them.
If we allow the whole page to be scaled, get larger and have bigger fonts,
then we have the horizontal scrollbar issue, which sucks.

So what happens is the font gets bigger, the page width stays the same.
The columns, if set in ems, get wider to match the font-size. If set in,
say, % of the viewport width, the lines wrap more often. Either way, the
page gets taller.

Make sense?

 

[Neal]

In alt.html Neal said:
i thought you had my phone number?

Sorry, pal, you have too much below the belt for me... I mean if it were 3
_months_ we'd talk...

 

[rf]

Neal pointed out

I could use a loose visitor,

Dammit. I allways[sic] get that one wrong. Spellchecker doesn't help either
:-(

my girlfriend's in Cancun for 3 days...\

Just make sure that when you have a trial run of GF version 2 that GF
version 1 is safely tucked away in the archive, or in Cancun. Also version 2
must be completely un-installed prior to any further use of version 1.