internet explorer 7 css width 100% problem

How can I fix this...

Here is my screen on IE7

And here it is on IE8

My css code here is..

#content{
    font-family:Arial;
    width: 100%;
    min-height: 5em;
    display: table-cell;
    /*vertical-align: middle;*/
    text-align: center;
}

#main_content{
    font-family:Arial;
    position: absolute;
    width: 90%;
    background-color: #f8f8f8; 
  left: 50%;
  margin-left: -45%;
    padding-bottom: 5%;
}

#main_content table{
    font-family:Arial;
    width: inherit;
    border:solid thin #dedede;
    border-spacing: 0;
    border-collapse:collapse;
    text-align:left;
    /*margin-bottom: 5%;*/
    padding-left: 2px;
}

#main_content table tr td{
    font-family:Arial;
    border:solid thin #dedede;
    background-color: #ffffff;
    border-spacing: 0;
    border-collapse:collapse;
    padding:0;
    text-align:left;
    padding-left: 2px;
}

#main_content table tr td input, #main_content table tr td select, #main_content table tr td textarea{
    font-family:Arial;
    width:94%;
    text-align:left;
    border: none;
    margin:0 auto;
    padding: 2% 2% 2% 2%;
}

#main_content table tr td select{
    font-family:Arial;
    width:100%;
}

Sorry about the lengthy post, It's just I've been stuck here for a long time..heh开发者_Python百科ehe

I ended up using Hacks thanks to @My Head Hurts. And also I'll try his suggestion of using asterisk(*) for IE7 css.