Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 606
  • Last Modified:

Problems with tables in Jquery tabs

Hi,

I have 3 tabs, the final tab needs to hold a table but whenever i try to insert it, the table simply falls below the tab and get's embeded into the page rather than in the tab. Can someone point to say what i'm doing wrong with a suitable correction?

My html/php/jquery knowledge is limited so please explain/fix in lamence terms for me. :)

Example can be found at http://74.53.102.167/~bookedy/tour.php?id=1

<ul class="tabs">
                          <li><a href="#tab1">Tour Details</a></li>
                <li><a href="#tab2">Itinerary</a></li>
	            <li><a href="#tab3">Dates, Prices & Book</a></li>
          </ul>
                        <div class="tab_container">
                            <div id="tab1" class="tab_content">
                              <p align="left"><span class="style1">Tour Overview </span><br />
                              <?php echo $row_tours['description']; ?></p>
            <p align="center"><img src="pictures/tablinebreak.jpg" alt="linebreak" width="400" height="5" /></p>
            <p align="left"><span class="style1">Highlights</span><br />
              <?php echo $row_tours['highlights']; ?></p>
            <p align="center"><img src="pictures/tablinebreak.jpg" alt="linebreak" width="400" height="5" /></p>
            <p align="left"><span class="style1">Optional Activities</span><br />
              <?php echo $row_tours['optionalextras']; ?></p>
			<p align="center"><img src="pictures/tablinebreak.jpg" alt="linebreak" width="400" height="5" /></p>
			   <p align="left"><b>Operated by</b> <p align="left"><img src="pictures/logos/trekamerica.jpg" alt="trekamerica" />
                </div>
                          <div id="tab2" class="tab_content">
                            <p align="left"><span class="style1">Tour Itinerary </span>
                              <?php do { ?> 
                              <p align="left"><strong>Day <?php echo $row_itinerary['day']; ?>- <?php echo $row_itinerary['location']; ?></strong><br />
                              <?php echo $row_itinerary['description']; ?>    
                              <p>
                              <?php } while ($row_itinerary = mysql_fetch_assoc($itinerary)); ?>
                          </div>
                          <div id="tab3" class="tab_content">
                            <p> <p> <p> <p align="left"><span class="style1"> Dates, Prices &amp; Book!    <p> 
							<table width="500">
                              <tr>
                                <td>Test 1</td>
                                <td>Test 2</td>
                                <td>Test 3</td>
                                <td>Test 4</td>
                              </tr>
                              <tr>
                                <td>Content 1</td>
                                <td>Content 2</td>
                                <td>Content 3</td>
                                <td>Content 4</td>
                              </tr>
                            </table>
							<p>
							  </span>
							  <br />
							  
					            </div>
                        </div>

Open in new window

0
bookedy
Asked:
bookedy
  • 2
1 Solution
 
SRigneyCommented:
I'd start with trying to simplify the html you have here.

I'm guessing on how you want this to end up, but there seems to be too many paragraphs, and not having the close tags may be part of what is causing a problem.
<div id="tab3" class="tab_content">
<p align="left"><span class="style1"> Dates, Prices &amp; Book!</span></p>
<table width="500">
<tr>
<td>Test 1</td>
<td>Test 2</td>
<td>Test 3</td>
<td>Test 4</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
</table>
</div>

Open in new window

0
 
bookedyAuthor Commented:
Hi,

I have copied your code as below but the table is still apearing under the frame. Any ideas?

Example at http://74.53.102.167/~bookedy/tour.php?id=1
<div id="tab3" class="tab_content">
<p align="left"><span class="style1"> Dates, Prices &amp; Book!</span></p>
<table width="500">
<tr>
<td>Test 1</td>
<td>Test 2</td>
<td>Test 3</td>
<td>Test 4</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
</table>
</div>

Open in new window

0
 
SRigneyCommented:
I think that the problem is that you are missing tags in other locations.


                  <table width="500px" border="0" cellpadding="0" cellspacing="0">
                    <!--DWLayoutTable-->
                    <tr>  
                      <ul class="tabs">


There is not a <td> here.  the table that isn't working right is embeded here, so the tags may be getting mixed up.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now