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

[jrf1]

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

 

[Steve Pugh]

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

 

[Ben C]

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

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.

 

[Jonathan N. Little]

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!

 

[jrf1]

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






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.





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


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.


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

 

[jrf1]

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

Yes, that works, as Steve said also. Thanks for the advice. As I
suspected there had to be some neater way. ;-)