Dynamic tab content problem with <td>

[raj_2006]

1) Script Title: Dynamic tab content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: Hi All,
First of all thanks to DD for providing a nice script.I am having a problem when replacing the link with an image within a separate <td>.Let me show my little bit modified code.

<ul id="maintab">
<tr>
<td width="77">
<li><a href="#" rel="tcontent1"> <input type="image" src="coverpage_filmer_welcomebut_on.gif" width="77" height="31">
</a></li></td>
<td width="123">
<li><a href="#" rel="tcontent2"> <input type="image" src="coverpage_filmer_guidebut_off.gif" width="123" height="31" border="0"></a></li>
</td>
</tr></ul>

But if i dont use the <td> then its working fine.But in that case I cant keep the images at a proper location i mean side by side.Also I have done changes in the tabcontent.css.I have removed the background images from the css class.I think thats not the problem just need to sort out the <td> problem.

Any help from you is highly welcomed friends.Also thanks in advance....luv...Raj

[jscheuer1]

Your HTML code is invalid. You cannot have:


<ul>
<tr>

Also:


<a><input></a>

It is not clear to me why you need an input. Why not just use an image tag for this?

[raj_2006]

yes I can give this one too <a><img src=""></a>


But still not fixing my problem.Its showing error in line 70 on the tabcontent.js file.I am willing to use the pure img rather than using the img through css class.

Also i have put <ul> inside the <tr>....but still same thing.


<tr>
<ul id="maintab">
<td>....</td>
<td>....</td>
<td>....</td>
</ul>
</tr>

[jscheuer1]

That's not valid either. There can be no elements inside the <table></table> tags except for table elements (unless they are inside a cell):

<tbody>
<tr>
<th>
<td>

There might be a few others but, certainly not ul or li. These must go inside a cell (<td> or <th>).

[raj_2006]

Thanks for your reply.I have placed it in this way:


<table>
<tr>
<td><ul id="maintab"><li>img<li></ul></td>
<td><ul id="maintab"><li>img<li></ul></td>
<td><ul id="maintab"><li>img<li></ul></td>
</tr></table>

But in this case the images are placing at a proper way but the content is not displaying.I am a newbie in javascript but the least i have understood that I cant keep id="maintab" more than one time.

Please suggest me and also thanks for your valuable opinion and time.

Luv....Raj

[jscheuer1]

I'm not sure that you can get there from here. There can only be one element on a page with any given id. Most browsers will overlook this rule for many style purposes but not when it comes to executing javascript.

If you want that type of layout and want to use Ajax, you should probably look into a more basic Ajax script and try working it out from there.

Look at:

http://www.dynamicdrive.com/dynamicindex17/ajaxroutine.htm

and at:

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm