Consistency Across Browsers?

[ACRDepos]

I'm struggling with acquiring the same consistent table size across all three primary browsers as shown below.

http://i41.tinypic.com/izxrtu.jpg - Chrome
http://i43.tinypic.com/24yctw6.jpg - Firefox
http://i39.tinypic.com/2ceg3lj.jpg - IE

I'm not sure if it's a coding issue or a table issue, but here's the primary CSS:

body{
    background-image: url(../DefaultBackground.png);
    background-repeat:repeat-x;
    background-color: #FFFFFF;
    border: 0;
    margin: 0;
}

#maincontainer{
    width: 980px;
    margin: 0 auto;
}

#topbar{
    height: 54px;
    font-family: Verdana;
    font-size: 12px;
    color: #FFFFFF;
}

#topbar table{
    border-collapse: collapse;
}

#firstdivleft{
    float: left;
    width: 430px;
}

#firstdivright{
    float: right;
    width: 550px;
}

#seconddivleft{
    float: left;
    height: 83px;
    width: 430px;
    position: relative;
}

.floatbottomleft{
    position: absolute;
    bottom: 0;
    left: 0;
}

#seconddivright{
    float: right;
    height: 83px;
    width: 550px;
}

#seconddivright table{
    border-collapse: collapse;
}

.floatbottomright{
    position: absolute;
    bottom: 0;
    right: 0;
}

textarea:focus, input:focus{
    outline: 0;
}

.welcome{
    text-align: right;
    font-family: Verdana;
    font-size: 14px;
    font-style: italic;
    color: #4c5993;
    padding-bottom: 7px;
    margin: 0;
}

.welcome a{
    color: #990000;
    text-decoration: none;
}

.welcome a:hover{
    color: #0066FF;
}

.logout{
    color: #990000;
}

#middiv{
    height: 20px;
    clear: both;
}

#mainblock{
    height: 337px;

    background: #f0f0f0;

    border-color: #999999;
    border-width: 1px;
    border-style: solid;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mainblockleft{
    width: 328px;
    float: left;
    padding-left: 10px;
}

#mainblockright{
    width: 617px;
    float: right;
    padding-right: 10px;
}

table.lefttable{
    border: 1px solid #CCCCCC;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    border-collapse: seperate;
    border-spacing: 0;

    margin: 0;
    padding: 0;

    height: 100%;
}

td.lefttabletoptd{
    border-radius: 5px 5px 0 0;
    background-color: #e6e6e7;

    font-family: Verdana;
    font-size: 14px;
    font-weight: 100px;
    color: #4c5993;

    padding: 6px;
}

td.lefttablesecondtoptd{
    background-color: #e6e6e7;

    font-family: Verdana;
    font-size: 12px;
    font-weight: 100px;
    color: #4c5993;
    padding: 0px 0px 6px 6px;
}

td.lefttablefirstmiddlelefttd{
    background-color: #f4f4f4;
    width: 123px;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    border-right: 1px solid #CCCCCC;

    height: 5px;
}

td.lefttablefirstmiddlerighttd{
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    height: 5px;
}

td.lefttablemiddlelefttd{
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    padding-left: 6px;

    border-right: 1px solid #CCCCCC;
}

td.lefttablemiddlerighttd{
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    padding-left: 6px;
}

td.lefttablebottomlefttd{
    border-radius: 0 0 0px 5px;
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    height: 4px;

    border-right: 1px solid #CCCCCC;
}

td.lefttablebottomrighttd{
    border-radius: 0 0 5px 0px;
    background-color: #f4f4f4;

    font-family: Verdana;
    font-size: 12px;
    color: #4c5993;

    height: 4px;
}

td.lefttablefirstmiddlelefttd a, td.lefttablemiddlelefttd a{
    color: #4c5993;
    text-decoration: none;
}

td.lefttablefirstmiddlelefttd a:hover, td.lefttablemiddlelefttd a:hover{
    color: #0066FF;
}

[JorgeM]

The pictures you link show that the rendering is pretty close across the three browsers.

What comes to mind without looking at your CSS or HTML is that you may not be aware but browsers have built-in styles on certain elements. So what happens is that if you do not override these styles, you'll see that rendering may be different depending on the browser you use. For example, an element may be styled with a different default value for margin or padding depending on the browser.

You may want to look at applying a CSS reset so that you apply a baseline styling across the elements prior to applying your custom styles.

A quick search online will reveal some common resets you can download and use in your projets.

[ACRDepos]

That did the trick thanks!