Aligning items with jquery

I'm building a scheduling system for my work, and it's set up to be a two column page - one column for the nav bar, and the next column for the data. I'm using some jquery to have it automatically format the column widths depending on the size of the user's screen. For some reason the size of the columns in my header table are different from my data table. This is probably confusing, but take a look at the code and it should make more sense.

Here is the html portion of the page.

<html>
<head>
<link rel="stylesheet" href="40press.css" type="text/css" />
<script type="text/javascript" src="../scripts/jquery.js" />
<script type="text/javascript">
var width = document.documentElement.clientWidth;
width = width - 200;
widthval = width + "px";
$(document).ready(function() {
    $("#title").css('width', widthval);
    $("#list").css('width', widthval);
    widthval = (width * .08) + "px";
    $("td#jobnumber").css('width', widthval);
    widthval = (width * .15) + "px";
    $("td#customer").css('width', widthval);
    widthval = (width * .15) + "px";
    $("td#CSR").css('width', widthval);
    widthval = (width * .25) + "px";
    $("td#desc").css('width', widthval);
    widthval = (width * .08) + "px";
    $("td#date").css('width', widthval);
    widthval = (width * .08) + "px";
    $("td#coating").css('width', widthval);
    widthval = (width * .02) + "px";
    $("td#plates").css('width', widthval);
    widthval = (width * .02) + "px";
    $("td#forms").css('width', widthval);
    widthval = (width * .05) + "px";
    $("td#impress").css('width', widthval);
    widthval = (width * .05) + "px";
    $("td#count").css('width', widthval);
    widthval = (width * .02) + "px";
    $("td#pages").css('width', widthval);

    $(".listitem").mouseenter(function() {
        $(this).css('background-color', '#A9B5FF');
    });
    $(".listitem").mouseleave(function() {
        $(this).css('background-color', 'white');
    });
});
</script>
</head>
<title>40" Press Schedule</title>
<body>
<table cellpadding="0" cellspacing="0" id="large">
    <tr id="header"><td><div id="lcorner"></div>
    <div id="title">
    <center><h1>40" Press Schedule</h1></center>
    <table id="fields">
        <tr><td class="left" id="jobnumber">Job #</td>
        <td class="left" id="customer">Customer</td>
        <td class="left" id="CSR">CSR</td>
        <td class="left" id="desc">Description</td>
        <td class="left" id="date">Due Date</td>
        <td class="left" id="coating">Coating</td>
        <td class="left" id="plates">Plates</td>
        <td class="left" id="forms">Forms</td>
        <td class="left" id="impress">Impress</td>
        <td class="left" id="count">Count</td>
        <td class="left" id="pages">Pages</td></tr>
    </table>
    </div>
    </td></tr>
    <tr id="body"><td>
    <div id="sidebar">
        <div class="selectedlistitem" id="joblog">Job Log</div>
        <div class="listitem" id="smallpresses">Small Presses</div>
        <div class="listitem" id="40presses">40" Presses</div>
        <div class="listitem" id="postpress">Post Press</div>
        <div class="listitem" id="ossmailing">OSS Mailing Ready to Ship</div>
        <div class="listitem" id="shipped">Shipped</div>
        <div class="listitem" id="dib">DIB</div>
        <div class="listitem" id="paper">Paper</div>
        <div class="listitem" id="dataentry">Data Entry</div>
        <div class="listitem" id="hotsheet">Hot Sheet</div>
        <div class="listitem" id="schedule2">Schedule2</div>
    </div>
    <div id="list">
    <div id="speedmaster" class="machine">SpeedMaster 102(640)</div>
    <div id="entry">    
        <table id="line">
            <tr><td class="left" id="jobnumber">24578</td>
            <td class="left" id="customer">MIFAB</td>
            <td class="left" id="CSR">Test User</td>
            <td class="left" id="desc">MIFab boxes fri paper need drawdownsd</td>
            <td class="left" id="date">10/26</td>
            <td class="left" id="coating">SPT Gls Aq</td>
            <td class="left" id="plates">2</td>
            <td class="left" id="forms">1</td>
            <td class="left" id="impress">500</td>
            <td class="left" id="count">18,000</td>
            <td class="left" id="pages">1</td></tr>
        </table>
    </div>
    </div>
    </td></tr>

</table>
</body>
</html>

And the CSS :

body {
    margin: 0px;
    padding: 0px;
}
#header {
    height: 150px;
}
#lcorner {
    height: 150px;
    width: 150px;
    background-color: #0a1e93;
    float:  left;
    border-bottom: 1px solid #A9B5FF;
}
#title {
    position: relative;
    height: 149px;
    float: left;
    border-bottom: 1px solid #A9B5FF;
}
td {
    border: 1px solid red;
}
td.left {
    text-align: left;
}
td.center {
    text-align: center;
}
#fields {
    position: absolute;
    bottom: 0;
}
#sidebar {
    float: left;
    width: 149px;
    border-right: 1px solid #0A1E93;
    margin: 0px;
    padding: 0px;
}
.listitem {
    text-align: center;
    height: 24px;
    border-bottom: 1px solid #AEAEAE;
    color: #0A1E93;
    position: relative;
    padding-top: 10%;
    padding-bottom: 10%;
}
.selectedlistitem {
    text-align: center;
    height: 24px;
    color: white;
    position: relative;
    padding-top: 10%;
    padding-bottom: 10%;
    background-color: #0A1E93;
}
#list {
    position: relative;
    float: left;
}

Any ideas on how to get them to align correctly?

Thanks, Joe

P.S. Is it preffered on stackoverflow.com to paste code on a seperate site? Or is putting it all in this type of format fine?

Update: I was able to fix it. I need to remove all margins and padding to the id="line" table. For some reason it wasn't being applied from parent containers. Thanks for your help!

ansaurus

tags:

views:

answers:

Aligning items with jquery

related questions