Re: Unable to move bullets to left of table.

Discussion in 'HTML' started by Jonathan N. Little, Sep 4, 2008.

  1. DLU wrote:
    > It turns out the problem was caused by a <ul> at the beginning of the
    > table. It did not need to be there as the table items all begin with a
    > <li><a href=


    ???

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 4, 2008
    #1
    1. Advertising

  2. Jonathan N. Little

    Lars Eighner Guest

    In our last episode,
    <>,
    the lovely and talented DLU
    broadcast on alt.html:

    > Jonathan N. Little wrote:
    >> DLU wrote:
    >>> It turns out the problem was caused by a <ul> at the beginning of the
    >>> table. It did not need to be there as the table items all begin with
    >>> a <li><a href=

    >>
    >> ???
    >>

    > Example:
    > For what ever reason, if I put a <ul> at the beginning of the table it
    > causes the bullets to indent several pixs.


    ><tr valign="top">
    > <td style="width: 540px">
    > <li><a href="blank"><b>Conservation Activists</b></a></li>
    > <li><a href="mailto:"><b>CNRCC
    > Chair</b></a></li>
    > <li><a href="EXCOM.htm"target="blank"><b>Steering
    > Committee</B></a></li>
    > <li><a href="information_links/SCC
    > EXCOM_links.htm"Target="blank"><b>Sierra Club California EXCOM</b></a></li>
    > <li><a href="blank"><b></b></a></li>
    > <li style="height: 9px; width: 222px;"><a href="blank"></a></li>


    This is, of course, totally invalid markup. If it happens to appear as
    you would like in one browser, there is no assurance that it will continue
    to so appear when the browser is updated or in any other browser.

    --
    Lars Eighner <http://larseighner.com/>
    "We have no opinion on your Arab - Arab conflicts, such as your dispute with
    Kuwait." -- Bush's Ambassador April Glaspie, giving Saddam Hussein
    the greenlight to invade Kuwait.
    Lars Eighner, Sep 5, 2008
    #2
    1. Advertising

  3. On 2008-09-05, DLU wrote:
    > Lars Eighner wrote:
    >> In our last episode,
    >> <>,
    >> the lovely and talented DLU
    >> broadcast on alt.html:
    >>
    >>> Jonathan N. Little wrote:
    >>>> DLU wrote:
    >>>>> It turns out the problem was caused by a <ul> at the beginning of the
    >>>>> table. It did not need to be there as the table items all begin with
    >>>>> a <li><a href=
    >>>> ???
    >>>>
    >>> Example:
    >>> For what ever reason, if I put a <ul> at the beginning of the table it
    >>> causes the bullets to indent several pixs.

    >>
    >>> <tr valign="top">
    >>> <td style="width: 540px">
    >>> <li><a href="blank"><b>Conservation Activists</b></a></li>
    >>> <li><a href="mailto:"><b>CNRCC
    >>> Chair</b></a></li>
    >>> <li><a href="EXCOM.htm"target="blank"><b>Steering
    >>> Committee</B></a></li>
    >>> <li><a href="information_links/SCC
    >>> EXCOM_links.htm"Target="blank"><b>Sierra Club California EXCOM</b></a></li>
    >>> <li><a href="blank"><b></b></a></li>
    >>> <li style="height: 9px; width: 222px;"><a href="blank"></a></li>

    >>
    >> This is, of course, totally invalid markup. If it happens to appear as
    >> you would like in one browser, there is no assurance that it will continue
    >> to so appear when the browser is updated or in any other browser.

    >
    > I have tried it with IE, Firefox, and Safari. It works in all of them.
    > I have not had any comments from committee members.


    That's pure luck, and there's no guarantee that any future browser
    will work the same way..

    > I am not sure what you mean it is invalid markup.
    > This is only the the listing part of the table.


    Try validating it at <http://validator.w3.org/>.

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Sep 6, 2008
    #3
  4. Jonathan N. Little

    Lars Eighner Guest

    In our last episode, <>, the
    lovely and talented DLU broadcast on alt.html:

    > Lars Eighner wrote:


    >> This is, of course, totally invalid markup. If it happens to appear as
    >> you would like in one browser, there is no assurance that it will
    >> continue to so appear when the browser is updated or in any other
    >> browser.


    > I have tried it with IE, Firefox, and Safari. It works in all of them. I
    > have not had any comments from committee members.


    Obviously you have no idea how HTML works. Where exactly did you study?

    Nothing can go in UL except LI. TABLE is something other than LI.

    That the error routines of some browsers can today handle this invalid
    markup gracefully doesn't mean they will continue to handle this error
    in the same way in the future or that any other browser will handle this
    error in exactly this way. Moreover, because you force the browser into
    error handling, other parts of your documents --- stuff you have in the
    documents now and stuff you may add later --- may not be rendered as they
    should be.

    > I am not sure what you mean it is invalid markup.


    Let's focus on the L in HTML. That L stands for language (HTML =
    Hyper-Text Markup Language). HTML is a language. It has a grammar.
    In fact it is a language with several dialects, and which dialect you
    use should be specified in the DOCTYPE declaration at the top of your
    document. Each dialect has a grammar. But in no dialect can UL contain
    a TABLE. The only thing that can go in UL is LI. The LI does not
    mean 'put a bullet here.' It means 'here is a list item.' UL means
    'I contain a list.' But TABLE is not a list item. So when you put TABLE in
    UL you are violating the grammar, and to the browser you breaking the
    promise of UL.


    > This is only the the listing part of the table.


    I really question that your table contains tabular data. I highly suspect
    that you are using TABLE in the attempt to arrange items in a certain way on
    the page when you view the TABLE in a particular browser. That is not what
    TABLE is for. However if you have a legitimate reason for puting a list in
    a table. do it like this:

    <table summary="demo of a list in a table">
    <caption>Valid list in a table</caption>
    <tr><th>My Dates</th><th>My things to do</th></tr>
    <tr><td>Monday</td>
    <td>
    <ul>
    <li>Laundry</li>
    <li>Medicate cat</li>
    <li>Pick up Jim at airport</li>
    </ul>
    </td></tr>

    and so forth ...

    </table>


    --
    Lars Eighner <http://larseighner.com/>
    War on Terrorism: Bad News from the Sanity Front
    "Tactical nuclear capabilities should be used against the bin Laden
    camps in the desert of Afghanistan." -Thomas Woodrow,_Washington Times_
    Lars Eighner, Sep 6, 2008
    #4
  5. Jonathan N. Little

    John Hosking Guest

    DLU wrote:
    > Chris F.A. Johnson wrote:
    >>
    >> Try validating it at <http://validator.w3.org/>.
    >>

    >
    > I did not see the file upload before.
    > Some of the invalid comments do not show in the code.
    > In other cases where it says the <li> has to be used with an <ol> or
    > other code, if I use the ol it numbers the items. I just want the
    > bullets.


    So use <ul> instead of <ol>. The <ul> is a form of "some other code"
    which you didn't look into. It provides an unordered list (typically
    using bullets, which is what you want). The <ol> is for an ordered list,
    numbered (or lettered) in order.

    > Also putting one of the codes causes the list to indent.


    CSS could help you adjust the margins as you desire.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    John Hosking, Sep 8, 2008
    #5
  6. Jonathan N. Little

    John Hosking Guest

    DLU wrote:
    > Chris F.A. Johnson wrote:
    >>
    >> Try validating it at <http://validator.w3.org/>.
    >>

    >
    > I did not see the file upload before.
    > Some of the invalid comments do not show in the code.
    > In other cases where it says the <li> has to be used with an <ol> or
    > other code, if I use the ol it numbers the items. I just want the
    > bullets.


    So use <ul> instead of <ol>. The <ul> is a form of "some other code"
    which you didn't look into. It provides an unordered list (typically
    using bullets, which is what you want). The <ol> is for an ordered list,
    numbered (or lettered) in order.

    > Also putting one of the codes causes the list to indent.


    CSS could help you adjust the margins as you desire.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    John Hosking, Sep 8, 2008
    #6
  7. Jonathan N. Little

    John Hosking Guest

    DLU wrote:
    > Lars Eighner wrote:


    >>
    >> I really question that your table contains tabular data. I highly
    >> suspect
    >> that you are using TABLE in the attempt to arrange items in a certain
    >> way on
    >> the page when you view the TABLE in a particular browser. That is not
    >> what
    >> TABLE is for. However if you have a legitimate reason for puting a
    >> list in
    >> a table. do it like this:

    >
    > And that leads to a second question.
    > In the following the <li> has an error shown that says:
    > In internet Explorer 6.0 the <td> can not contain a tag <li>
    > <tr valign="top">
    > <td style="width: 260; height: 255px;">
    > <li><a href="http://www.desertreport.org/"target="blank"
    > class="style13" ><b>Desert Committee</b></a>
    >
    > Website is at:http://clubhouse.sierraclub.org/ca/cnrcc/index.asp
    > My email b i k e s a c at surewest dot net
    >


    You forgot to say what the question was.

    And *where* is an error shown that says
    In internet Explorer 6.0 the <td> can not contain a tag <li>
    ....?

    A <li> has to be in a <ul> or <ol>. It can't otherwise be (directly) in
    a <td> or any other element.

    Looks like you left out some of what Lars suggested.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    Possessive "its" has no apostrophe. Even on the Internet.
    John Hosking, Sep 8, 2008
    #7
  8. Jonathan N. Little

    John Hosking Guest

    DLU wrote:
    > Lars Eighner wrote:


    >>
    >> I really question that your table contains tabular data. I highly
    >> suspect
    >> that you are using TABLE in the attempt to arrange items in a certain
    >> way on
    >> the page when you view the TABLE in a particular browser. That is not
    >> what
    >> TABLE is for. However if you have a legitimate reason for puting a
    >> list in
    >> a table. do it like this:

    >
    > And that leads to a second question.
    > In the following the <li> has an error shown that says:
    > In internet Explorer 6.0 the <td> can not contain a tag <li>
    > <tr valign="top">
    > <td style="width: 260; height: 255px;">
    > <li><a href="http://www.desertreport.org/"target="blank"
    > class="style13" ><b>Desert Committee</b></a>
    >
    > Website is at:http://clubhouse.sierraclub.org/ca/cnrcc/index.asp
    > My email b i k e s a c at surewest dot net
    >


    You forgot to say what the question was.

    And *where* is an error shown that says
    In internet Explorer 6.0 the <td> can not contain a tag <li>
    ....?

    A <li> has to be in a <ul> or <ol>. It can't otherwise be (directly) in
    a <td> or any other element.

    Looks like you left out some of what Lars suggested.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    Possessive "its" has no apostrophe. Even on the Internet.
    John Hosking, Sep 8, 2008
    #8
  9. Jonathan N. Little

    John Hosking Guest

    DLU wrote:
    > John Hosking wrote:
    >> DLU wrote:
    >>> Lars Eighner wrote:

    >>
    >>>>
    >>>> I really question that your table contains tabular data. I highly
    >>>> suspect
    >>>> that you are using TABLE in the attempt to arrange items in a
    >>>> certain way on
    >>>> the page when you view the TABLE in a particular browser. That is
    >>>> not what
    >>>> TABLE is for. However if you have a legitimate reason for puting a
    >>>> list in
    >>>> a table. do it like this:
    >>>
    >>> And that leads to a second question.
    >>> In the following the <li> has an error shown that says:
    >>> In internet Explorer 6.0 the <td> can not contain a tag <li>
    >>> <tr valign="top">
    >>> <td style="width: 260; height: 255px;">
    >>> <li><a href="http://www.desertreport.org/"target="blank"
    >>> class="style13" ><b>Desert Committee</b></a>
    >>>
    >>> Website is at:http://clubhouse.sierraclub.org/ca/cnrcc/index.asp


    Is this really the page we're talking about? I don't see the links you
    keep talking about, nor any bullet-worthy items. I see an ordered
    (numbered) list of five troubleshooting steps. That's even with JS on
    and cookies accepted.

    >>
    >> A <li> has to be in a <ul> or <ol>. It can't otherwise be (directly)
    >> in a <td> or any other element.
    >>
    >> Looks like you left out some of what Lars suggested.
    >>

    > It is difficult to explain the page without actually looking at it.


    So provide the real URL, please.

    Ah, I see, I've now logged in (from the first URL), and am looking at
    <http://clubhouse.sierraclub.org/ca/cnrcc/index.asp>. That's the page, yes?

    BTW, and unrelated to your stated problem, your images are lovely, but
    serving 1MB - 3MB images files for thumbnail-style pictures of 180x148
    px is really bad. Use a graphics program to resize and resample the jpgs
    to whatever display size you want, and serve *those* little files. And
    use more descriptive alt texts.

    > However there are three columns each several pix wide and in each column
    > is two or more sections that are basically tables, but not as a normal
    > table. That is each contains a heading and links to other pages where
    > several other links are situated.


    So, in other words, unordered lists, and not tables. Not basically
    tables. Lists. Accept it. Use it. Thrive with it.

    You *are* using tables for layout. Instead of making a table for a
    heading, followed by a table for a list of link items, next to other
    table-for-heading-plus-table-for-lists, all wrapped in a table, all
    inside another table, etc., try to use the simple semanticism of HTML.

    Try this structure:

    <div>
    <h2></h2>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>

    For each group of links, add the heading in the <h2> element, and in the
    list items, fill in the links (wrapped as <a> elements). Repeat as many
    <li>s as you need for the group, repeat as many groups as you need, then
    style with CSS to format the contents and to help arrange the groups.


    >
    > I want to have bullets in front of the links but to do so I have to use
    > the <li><a href= code.


    Yes, this is sensible, logical, natural, and right.

    > If I put an <ul> at the head of the list it
    > indents the left margin and I have not found a way to get rid of the
    > indentation.


    Well, just because you don't know CSS isn't sufficient reason to
    pervert your markup, or keep it invalid.

    Did you not see the suggestion from Neredbojias:

    ul {
    margin:0;
    padding-left:1em;
    }

    and Bergamot's counter-proposal

    Make that padding-left:20px;

    in the thread above?

    > One suggestion is make a new CSS that will give the links
    > a bullet.


    Strictly speaking, you're not giving the links a bullet; the list items
    have bullets by default. When the contents of a <li> is a link, then it
    will look the way you're asking for.

    > That would make it easier to format all the tables. I know
    > you do not call them tables but they act like tables and are constructed
    > like tables.
    >


    If you call them tables and they are not tables, then the people who
    would help you (and who know what "tables" really mean) will be
    confused. Or irked. Tip: learn the correct names for things (and enjoy
    more efficient, more satisfying communications).

    Okay, now that I've seen the actual page, I see that you are in fact
    sort of using <table> for parts of these link groups. Doesn't make it
    right, but it'll explain the confusion.

    >
    > It almost looks like I will have to make a personal site in order to put
    > the page there so it can be looked at. At present it is up and running
    > but I want to clean up all the code.
    >
    > <LI ...> indicates the start of a new line item within a list. <LI ...>
    > can be used with <OL ...>, <UL ...>, and <DIR ...>


    Why are you writing this here? And why do you think <dir> is a valid
    parent of <li>?

    It wouldn't be bad to start over, but of course you won't want to hear
    that. FWIW, there are a plentitude of fundamental mistakes here (not
    least the invalid code and quirks-mode lack of doctype) but the think
    you're posting here about looks okay to me. Namely, the bullets seem
    nicely lined up on the left of each link-group, both in IE6 and FF2.

    --
    John
    John Hosking, Sep 8, 2008
    #9
  10. Jonathan N. Little

    dorayme Guest

    In article <>,
    DLU <> wrote:


    > I want to have bullets in front of the links but to do so I have to use
    > the <li><a href= code. ...


    Take a look at

    <http://htmldog.com/guides/htmlbeginner/lists/>

    and ask questions about this instead.

    --
    dorayme
    dorayme, Sep 8, 2008
    #10
  11. Jonathan N. Little

    Neredbojias Guest

    Neredbojias, Sep 8, 2008
    #11
    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. Bob H

    Datagrid and bullets

    Bob H, Feb 5, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    396
    =?Utf-8?B?QXZuZWVzaA==?=
    Feb 5, 2004
  2. ComputerSnack
    Replies:
    7
    Views:
    1,869
    Jonathan N. Little
    Apr 13, 2006
  3. =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=

    Help on table align on left of page vs left hanging indent

    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=, Jul 10, 2007, in forum: XML
    Replies:
    2
    Views:
    1,000
    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=
    Jul 16, 2007
  4. dorayme
    Replies:
    35
    Views:
    1,309
    John Hosking
    Aug 26, 2008
Loading...

Share This Page