Menu
Hey, I seem to be having a problem with my table when I load in more information with Jquery.
When I click the ‘more info’ link more content slides down but unfortunately seems to expand the table right or something.
Here are a couple of pictures of the page to explain better:
page normal state:
[URL=”http://i645.photobucket.com/albums/uu171/damicoa1/Picture4.png”]http://i645.photobucket.com/albums/uu171/damicoa1/Picture4.png
‘more info’ link clicked:
[URL=”http://i645.photobucket.com/albums/uu171/damicoa1/Picture1.png”]http://i645.photobucket.com/albums/uu171/damicoa1/Picture1.png
And here is the page source:
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Title Here</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”listing.js”></script>
</head>
<body>
<div id=”login-nav”>
<a href=”login.php”>Please Login!</a> </div>
<div id=”top-nav”>
<a href=”index.php”>Home</a>
<a href=”buy.php”>Sites</a>
<a href=”register.php”>Sign-Up</a>
<a href=”login.php”>Login</a>
<a href=”myac.php”>My Account</a>
</div>
<div id=”page-wrap”>
<div id=”curve-container”></div>
<div id=”main-content”>
<div id=”article-area”>
<h1>Sites</h1>
<div id=”output-listings”>
<div class=”main-info”>
<table class=”listings”>
<tbody>
<tr id=”more-info-1″ class=”mi-1″>
<td>
<div class=”more-information-1″></div>
</td>
</tr>
<tr id=”main-info-1″>
<td>Leftlane News</td>
<td>www.leftlanenews.com/</td>
<td><a id=”link-1″ class=”more-info-link” href=”#”>More info</a></td>
</tr>
<tr id=”more-info-2″ class=”mi-2″>
<td>
<div class=”more-information-2″></div>
</td>
</tr>
<tr id=”main-info-2″>
<td>Motor Authority</td>
<td>www.motorauthority.com/ </td>
<td><a id=”link-2″ class=”more-info-link” href=”#”>More info</a></td>
</tr>
<tr id=”more-info-3″ class=”mi-3″>
<td>
<div class=”more-information-3″></div>
</td>
</tr>
<tr id=”main-info-3″>
<td>Autoblog</td>
<td>http://www.autoblog.com/</td>
<td><a id=”link-3″ class=”more-info-link” href=”#”>More info</a></td>
</tr>
</tbody>
</table>
</div>
</div><!–end output-listings–>
</div>
<div class=”clear”></div>
</div>
<div id=”footer”></div>
<div id=”curve-container”></div>
<div id=”features”>
<div id=”p-header”>
<h1>Header Here</h1>
<p>Text Here.</p>
</div>
</div>
<div id=”ft-bottom”></div>
<div id=”text-footer”><p>Copyright © 2009 . All rights reserved.</p></div>
</div>
</body>
</html>
Anyone know whats going on?