Making borders look the same width in all browsers

The other day i was doing a new design for our company which involved a leftnav that uses a border. The border was fine but the problem was getting the border to match up with the image above the border. In every browser it seemed like i could not get this border to line up. Well after doing research i ended up doing this and it worked perfectly! Yes i did use tables for the leftnav but only so that the leftnav will always stay the same length as the right side no matter how big or small it gets. If anyone has a better idea that involves no tables i am all ears for now that is the only solution i have come up with. Anyway here is the solution to the border problem.

/*This controls the entire leftnav for all the pages*/
#leftnavlightingindex
{
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background-color:#eaf9e4;
}


/*controls the entire leftnavs width so it looks good in all 5 browsers*/
#entireleftnavwidth
{
width:235px;
}

<table cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="leftnavlightingindex">
<div id="entireleftnavwidth">
THE entire left nav here
</div>
</td>
<td>
Other side of page
</td>
</tr>
</table>

• Basically putting a div instead the table with the exact width i needed helped make the entire leftnav the same width in all browsers

I got this idea from this website
http://stackoverflow.com/questions/701332/html-css-table-cell-and-border-displaying-differently-in-ie-chrome-and-firefox-o