Advice re. anchor within a table and handling var. browsers

Discussion in 'HTML' started by jrf1@ntlworld.com, Apr 20, 2007.

  1. Guest

    Hi,

    I am developing an app. and I want to allow people to answer questions
    and jump the list of questions up as they do it. I can make this work
    but IE6 requires slightly different HTML than Firefox and Opera.
    See below...

    ** IE6 example *****
    <table id="qtab">
    <tr><a name='Q1'></a><td colspan=4> </td></tr>"
    <tr>
    <td class="q">Considers opportunities for growth and change.</td>
    <td class="a"><input .............></td>
    <td class="a"><input .............></td>
    <td class="a"><input .............></td>
    </tr>
    * tr repeated
    </table>


    ** Firefox/Opera example *****
    <table id="qtab">
    <tr><td><a name='Q1'></a></td><td colspan=3> </td></tr>"
    <tr>
    <td class="q">Considers opportunities for growth and change.</td>
    <td class="a"><input .............></td>
    <td class="a"><input .............></td>
    <td class="a"><input .............></td>
    </tr>
    * tr repeated
    </table>

    As you can see Firefox and Opera require the anchor Q1 to be within a
    TD. IE won't work with that setup and needs the anchor not to be
    defined
    within a table element.

    The following script deals with this situation

    <table id="qtab">
    <script language="JavaScript">
    if (navigator.appName=="Microsoft Internet Explorer")
    { document.write("<a name='Q1'></a><td colspan=8> </td></tr>") }
    else
    { document.write("<td><a name='Q1'></a></td><td colspan=7>
    </td></tr>") }
    </script>
    <tr>
    <td class="q">Considers opportunities for growth and change.</td>
    <td class="a"><input .............></td>
    <td class="a"><input .............></td>
    <td class="a"><input .............></td>
    </tr>
    * tr repeated
    </table>

    but it doesn't seem very elegant. I'm not very happy with bits of
    script
    all through the page like this (as the page has a large number of
    questions on it).
    Can anyone suggest a better way?

    Regards, John
     
    , Apr 20, 2007
    #1
    1. Advertising

  2. Steve Pugh Guest

    On Apr 20, 1:27 pm, wrote:
    > Hi,
    >
    > I am developing an app. and I want to allow people to answer questions
    > and jump the list of questions up as they do it. I can make this work
    > but IE6 requires slightly different HTML than Firefox and Opera.
    > See below...
    >
    > ** IE6 example *****
    > <table id="qtab">
    > <tr><a name='Q1'></a><td colspan=4> </td></tr>"


    This is invalid. A is not allowed as a direct child of tr.

    > <tr>
    > <td class="q">Considers opportunities for growth and change.</td>
    > <td class="a"><input .............></td>
    > <td class="a"><input .............></td>
    > <td class="a"><input .............></td>
    > </tr>
    > * tr repeated
    > </table>
    >
    > ** Firefox/Opera example *****
    > <table id="qtab">
    > <tr><td><a name='Q1'></a></td><td colspan=3> </td></tr>"
    > <tr>
    > <td class="q">Considers opportunities for growth and change.</td>
    > <td class="a"><input .............></td>
    > <td class="a"><input .............></td>
    > <td class="a"><input .............></td>
    > </tr>
    > * tr repeated
    > </table>
    >
    > As you can see Firefox and Opera require the anchor Q1 to be within a
    > TD. IE won't work with that setup and needs the anchor not to be
    > defined within a table element.


    But in your example it is. It's very much inside the table element,
    and inside the table row element, but it isn't inside the table cell,
    which is where it must go in order to be valid.

    >
    > The following script deals with this situation
    >
    > <table id="qtab">
    > <script language="JavaScript">


    This is also invalid. Script is not allowed as a direct child of
    table.

    > if (navigator.appName=="Microsoft Internet Explorer")
    > { document.write("<a name='Q1'></a><td colspan=8> </td></tr>") }
    > else
    > { document.write("<td><a name='Q1'></a></td><td colspan=7>
    > </td></tr>") }
    > </script>



    > but it doesn't seem very elegant. I'm not very happy with bits of
    > script all through the page like this (as the page has a large number of
    > questions on it).


    And if the user doesn't have JavaScript there's nothing inserted at
    all. Not a bad situation as those empty rows really shouldn't be
    there.

    > Can anyone suggest a better way?


    <tr>
    <td class="q" id="Q1">Considers opportunities for growth and change.</
    td>

    Decent browsers will link directly to the id. If this doesn't work
    then try
    <tr>
    <td class="q"><a name="Q1" id="Q1">Considers opportunities for growth
    and change.</a></td>

    But also, consider creating your questions as fieldsets/legends.

    Steve
     
    Steve Pugh, Apr 20, 2007
    #2
    1. Advertising

  3. Ben C Guest

    On 2007-04-20, <> wrote:
    > Hi,
    >
    > I am developing an app. and I want to allow people to answer questions
    > and jump the list of questions up as they do it. I can make this work
    > but IE6 requires slightly different HTML than Firefox and Opera.
    > See below...
    >
    > ** IE6 example *****
    ><table id="qtab">
    ><tr><a name='Q1'></a><td colspan=4> </td></tr>"
    ><tr>
    ><td class="q">Considers opportunities for growth and change.</td>
    ><td class="a"><input .............></td>
    ><td class="a"><input .............></td>
    ><td class="a"><input .............></td>
    ></tr>
    > * tr repeated
    ></table>
    >

    [...]
    > As you can see Firefox and Opera require the anchor Q1 to be within a
    > TD. IE won't work with that setup and needs the anchor not to be
    > defined
    > within a table element.


    It's invalid in a particularly nasty way to put an <a> and a " character
    in a <tr> like that. If whatever bodge IE is doing with it works for you
    today then that's lucky but this is not a sensible way to do things.

    > The following script deals with this situation
    >
    ><table id="qtab">
    ><script language="JavaScript">
    > if (navigator.appName=="Microsoft Internet Explorer")
    > { document.write("<a name='Q1'></a><td colspan=8> </td></tr>") }
    > else
    > { document.write("<td><a name='Q1'></a></td><td colspan=7>
    ></td></tr>") }
    ></script>
    ><tr>
    ><td class="q">Considers opportunities for growth and change.</td>
    ><td class="a"><input .............></td>
    ><td class="a"><input .............></td>
    ><td class="a"><input .............></td>
    ></tr>
    > * tr repeated
    ></table>
    >
    > but it doesn't seem very elegant.


    You have a gift for understatement.

    > I'm not very happy with bits of script all through the page like this
    > (as the page has a large number of questions on it). Can anyone
    > suggest a better way?


    No, but then I don't know exactly what you're trying to do. There has to
    be a better way.
     
    Ben C, Apr 20, 2007
    #3
  4. wrote:
    > Hi,
    >
    > I am developing an app. and I want to allow people to answer questions
    > and jump the list of questions up as they do it. I can make this work
    > but IE6 requires slightly different HTML than Firefox and Opera.
    > See below...
    >


    <snip code>

    Many have already mentioned your solution employed invalid markup, there
    is a much better, simpler way is to put anchors on specific rows of a
    table set an ID to the table row of first table cell...

    <a href="#pushpin">Just to some row...</a>

    ....

    <table>

    ....

    <tr id="pushpin"><td>Will jump to here</td>...

    One simple solution, no JavaScript, valid, and even IE will cooperate!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 20, 2007
    #4
  5. Guest

    On Apr 20, 1:51 pm, Steve Pugh <> wrote:
    > On Apr 20, 1:27 pm, wrote:
    >
    > > Hi,

    >
    > > I am developing an app. and I want to allow people to answer questions
    > > and jump the list of questions up as they do it. I can make this work
    > > but IE6 requires slightly different HTML than Firefox and Opera.
    > > See below...

    >
    > > ** IE6 example *****
    > > <table id="qtab">
    > > <tr><a name='Q1'></a><td colspan=4> </td></tr>"

    >
    > This is invalid. A is not allowed as a direct child of tr.
    >
    >
    >
    > > <tr>
    > > <td class="q">Considers opportunities for growth and change.</td>
    > > <td class="a"><input .............></td>
    > > <td class="a"><input .............></td>
    > > <td class="a"><input .............></td>
    > > </tr>
    > > * tr repeated
    > > </table>

    >
    > > ** Firefox/Opera example *****
    > > <table id="qtab">
    > > <tr><td><a name='Q1'></a></td><td colspan=3> </td></tr>"
    > > <tr>
    > > <td class="q">Considers opportunities for growth and change.</td>
    > > <td class="a"><input .............></td>
    > > <td class="a"><input .............></td>
    > > <td class="a"><input .............></td>
    > > </tr>
    > > * tr repeated
    > > </table>

    >
    > > As you can see Firefox and Opera require the anchor Q1 to be within a
    > > TD. IE won't work with that setup and needs the anchor not to be
    > > defined within a table element.

    >
    > But in your example it is. It's very much inside the table element,
    > and inside the table row element, but it isn't inside the table cell,
    > which is where it must go in order to be valid.
    >
    >
    >
    > > The following script deals with this situation

    >
    > > <table id="qtab">
    > > <script language="JavaScript">

    >
    > This is also invalid. Script is not allowed as a direct child of
    > table.
    >
    > > if (navigator.appName=="Microsoft Internet Explorer")
    > > { document.write("<a name='Q1'></a><td colspan=8> </td></tr>") }
    > > else
    > > { document.write("<td><a name='Q1'></a></td><td colspan=7>
    > > </td></tr>") }
    > > </script>
    > > but it doesn't seem very elegant. I'm not very happy with bits of
    > > script all through the page like this (as the page has a large number of
    > > questions on it).

    >
    > And if the user doesn't have JavaScript there's nothing inserted at
    > all. Not a bad situation as those empty rows really shouldn't be
    > there.
    >
    > > Can anyone suggest a better way?

    >
    > <tr>
    > <td class="q" id="Q1">Considers opportunities for growth and change.</
    > td>
    >
    > Decent browsers will link directly to the id. If this doesn't work
    > then try
    > <tr>
    > <td class="q"><a name="Q1" id="Q1">Considers opportunities for growth
    > and change.</a></td>
    >
    > But also, consider creating your questions as fieldsets/legends.
    >
    > Steve



    I realise some of these things are not correct HTML. However they are
    accepted by IE6 and do work. This is the point of my question, or one
    of them anyway.
    Where I said the <a> was not in a table element, I didn't word that
    properly. I meant table elements in general, as it isn't inside a TD.
    It is inside the Table of course.

    IE seems poor at following the HTRML rules, and Firefox and Opera are
    better in that respect.

    Linking to IDs worked fine, so I can remove those anchors completely,
    in IE, Firefox and Opera. Still to test in Safari, and a couple of
    others but so far, so good.

    Thanks for the advice.
     
    , Apr 22, 2007
    #5
  6. Guest

    On Apr 20, 5:07 pm, "Jonathan N. Little" <>
    wrote:
    > wrote:
    > > Hi,

    >
    > > I am developing an app. and I want to allow people to answer questions
    > > and jump the list of questions up as they do it. I can make this work
    > > but IE6 requires slightly different HTML than Firefox and Opera.
    > > See below...

    >
    > <snip code>
    >
    > Many have already mentioned your solution employed invalid markup, there
    > is a much better, simpler way is to put anchors on specific rows of a
    > table set an ID to the table row of first table cell...
    >
    > <a href="#pushpin">Just to some row...</a>
    >
    > ...
    >
    > <table>
    >
    > ...
    >
    > <tr id="pushpin"><td>Will jump to here</td>...
    >
    > One simple solution, no JavaScript, valid, and even IE will cooperate!
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com




    Yes, that works, as Steve said also. Thanks for the advice. As I
    suspected there had to be some neater way. ;-)
     
    , Apr 22, 2007
    #6
    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. thomson
    Replies:
    10
    Views:
    2,504
    Eliyahu Goldin
    Jun 20, 2005
  2. thomson
    Replies:
    0
    Views:
    391
    thomson
    Jun 20, 2005
  3. Alex Vinokur
    Replies:
    4
    Views:
    479
    Ron Natalie
    Sep 24, 2003
  4. daniele.g
    Replies:
    4
    Views:
    482
    Joe Pfeiffer
    Jul 15, 2011
  5. Phil Walls

    How to nest HTML Table within Anchor Tag

    Phil Walls, Jan 19, 2004, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    113
    Phil Walls
    Jan 19, 2004
Loading...

Share This Page