tags:

views:

169

answers:

2

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 picture of the page being expanded to explain better:

'more info' link clicked: Click Here

And here is the page source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<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"&gt;&lt;/script&gt;
    <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/&lt;/td&gt; 
          <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 &copy; 2009 . All rights reserved.</p></div>

</div>

</body>

</html>

Anyone know whats going on?

And here is the CSS file if anyone needs to take a peek at it:

* {
    margin: 0;
    padding: 30px 45px;
}

body {
    background: #EFEFEF none repeat scroll 0 0;
    color: #333333;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 12px;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 18px;
}
/* TOOLBOX */

.clear { clear: both; }
/* END TOOLBOX */
#top-nav {
    text-align: right;
}
    #top-nav a {
     padding: 10px 30px;
     text-decoration: none;
     }
     #top-nav a:link {
      color: #333333; 
      }
      #top-nav a:visited {
       color: #999999;
       }
       #top-nav a:hover {
        color: #0088CC;
        }
#page-wrap {

    }
    #curve-container {
    background: url(content_bgtop.gif) no-repeat scroll 0 0;
    padding: 2px 26px;
    width: 932px;
    }
    #main-content {
    width: 984px;
    background: url(content_bg.gif) repeat-y;
     }
    #article-area {
     }
#footer {
    background: url(content_bgbottom.gif) no-repeat;
    width:932px;
}
#features {
    width: 984px;
    background: url(content_bg.gif) repeat-y;
}
    #p-header { 
     }
     #ft-bottom {
      background: url(content_bgbottom.gif) no-repeat;
      width:932px; 
     }
#text-footer {
    font-size: 10;
    text-align: center;
}
.spacer{clear:both; height:1px;}

.formlogin {
    margin: 0 auto;
    width: 720px;
    padding: 40px;
    }
#loginform {
    border: solid 2px #333333;
    background: #EFEFEF;
    }
    #loginform label {
     display:block;
     font-weight:bold;
     text-align:right;
     width:140px;
     float:left;
     }
     #loginform .small {
      color:#666666;
      display:block;
      font-size:11px;
      font-weight:normal;
      text-align:right;
      width:140px;
      }
      #loginform input {
       float:left;
       font-size:12px;
       padding:4px 2px;
       border:solid 1px #aacfe4;
       width:200px;
       margin:2px 0 20px 10px;
       }
#output-listings {
    margin-top: -150px;
    margin-bottom: 20px;
    padding: 0px;
    }
    table {
     width: 800px;
     }
#listing-db {
    padding: 0px;
    }

tr.hover td { background: #FDFFE7; }
    table { border-collapse:collapse;
      color:#3F3F3F;
      font-family:arial,helvetica,sans-serif;
      border-top:1px solid #DFDFDF;
       }

#output-listings { padding-top: 150px; }


.mi { display: none;
    width: 800px; }
A: 

How are you "showing" the more info via JS/jQuery? Are you using .toggle() or manually setting the display?

If the element is a table element, you might be setting its display to block instead of table-cell

Please post your JS file so it is easier to debug.

Mark Ursino
A: 

Here is the JS file:

$(function(){
    $("tr").hover(function(){
     $(this).addClass("hover");
    }, function() {
     $(this).removeClass("hover");
    });

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).toggle('fast');
    return false;
})


});
Spyderfusion02