Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 603
  • 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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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