list formatting

Discussion in 'HTML' started by Jens Lenge, Oct 21, 2004.

  1. Jens Lenge

    Jens Lenge Guest

    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, Oct 21, 2004
    #1
    1. Advertising

  2. Jens Lenge

    Nik Coughin Guest

    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>
    Nik Coughin, Oct 21, 2004
    #2
    1. Advertising

  3. Jens Lenge

    brucie Guest

    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
    brucie, Oct 21, 2004
    #3
  4. Jens Lenge

    Jens Lenge Guest

    >> 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
    Jens Lenge, Oct 21, 2004
    #4
  5. Jens Lenge

    brucie Guest

    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
    brucie, Oct 21, 2004
    #5
  6. Jens Lenge

    C A Upsdell Guest

    "Jens Lenge" <> wrote in message
    news:cl9ao4$atb$04$-online.com...
    > 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.
    C A Upsdell, Oct 22, 2004
    #6
  7. Jens Lenge

    rf Guest

    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.
    rf, Oct 22, 2004
    #7
  8. Jens Lenge

    Mark Parnell Guest

    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
    Mark Parnell, Oct 22, 2004
    #8
  9. Jens Lenge

    Jens Lenge Guest

    > 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, Oct 22, 2004
    #9
  10. Jens Lenge

    Jens Lenge Guest

    > 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.
    Jens Lenge, Oct 22, 2004
    #10
  11. Jens Lenge

    Sid Ismail Guest

    On Fri, 22 Oct 2004 00:52:24 +0200, "Jens Lenge" <> wrote:

    : 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
    Sid Ismail, Oct 22, 2004
    #11
  12. Jens Lenge

    rf Guest

    Jens Lenge wrote:

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

    --
    Cheers
    Richard.
    rf, Oct 22, 2004
    #12
  13. Jens Lenge

    brucie Guest

    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.

    --


    v o i c e s
    brucie, Oct 22, 2004
    #13
  14. Jens Lenge

    rf Guest

    Jens Lenge wrote:

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


    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.

    --
    Cheers
    Richard.
    rf, Oct 22, 2004
    #14
  15. Jens Lenge

    Wÿrm Guest

    "brucie" <> wrote in message
    news:14tnak5rzhg10$...

    <snip>
    > YAY! what? what? money? sex? drugs? a blue balloon?


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

    <snip>
    Wÿrm, Oct 22, 2004
    #15
  16. Jens Lenge

    brucie Guest

    In alt.html Neal said:

    >> Sure way to loose viewers.


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


    i thought you had my phone number?

    --


    v o i c e s
    brucie, Oct 22, 2004
    #16
  17. Jens Lenge

    Neal Guest

    On Thu, 21 Oct 2004 23:05:55 GMT, rf <rf@.invalid> wrote:

    > Sure way to loose viewers.


    I could use a loose visitor, my girlfriend's in Cancun for 3 days...
    Neal, Oct 22, 2004
    #17
  18. Jens Lenge

    Neal Guest

    On Fri, 22 Oct 2004 01:21:42 +0200, Jens Lenge <> wrote:

    > 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, Oct 22, 2004
    #18
  19. Jens Lenge

    Neal Guest

    On Fri, 22 Oct 2004 12:18:52 +1000, brucie <> wrote:
    > 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?


    Sorry, pal, you have too much below the belt for me... I mean if it were 3
    _months_ we'd talk...
    Neal, Oct 22, 2004
    #19
  20. Jens Lenge

    rf Guest

    Neal pointed out
    > On Thu, 21 Oct 2004 23:05:55 GMT, rf <rf@.invalid> wrote:
    >
    > > Sure way to loose viewers.

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

    --
    Cheers
    Richard.
    rf, Oct 22, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Robert
    Replies:
    3
    Views:
    438
    norseman
    Jul 10, 2008
  2. Michiel Overtoom
    Replies:
    1
    Views:
    333
    Niklas Norrthon
    Jul 22, 2008
  3. stephen_b
    Replies:
    3
    Views:
    888
    stephen_b
    Jun 9, 2009
  4. Oltmans
    Replies:
    2
    Views:
    254
  5. eagle

    Formatting in a drop down list in a grid

    eagle, Aug 11, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    98
    eagle
    Aug 11, 2005
Loading...

Share This Page