CSS issue for diffrent browsers

See more:

CSS

Hello all

i have used list view in diffrent web pages for list view i made a CSS class for that the code is as follows.................

/** Listview Table **/
.list { background-color: #ffffff; border:solid 3px #a5a4bd;}
.list-title-bar { background:#8988a5 url(images/title-bg.gif); border-bottom:solid 1px #57566f; height:28px;
           line-height:28px; margin:0px; padding:0px 0px 0px 5px; color:#fff; font-size:1.25em; }
.list-title { padding-bottom:4px; color:#990000; font-size:1.25em; font-weight:bold; float:left; width:379px;}
.list-actions { float:right; text-align:right; width:320px;}
.list table { margin:0px; border-collapse:collapse; width:100%; }
.list tr { }
.list tr.even { background-color:#f0f0f0; }
.list th { background:#e9e9eb url(images/header-bg.gif); height:24px; padding-left:6px; padding-right:6px; color:#666666; text-align:left; vertical-align:middle }
.list th.first { background:#e9e9eb url(images/header-bg.gif) -3px 0px; }
.list th.buttons { width:60px; vertical-align:middle; }
.list td { padding:2px 6px 2px 6px; border-bottom:solid 1px #eae9; idth: 20px; }
.list td { padding:2px 6px 2px 6px; border-bottom:solid 1px #eae9e1; color:#222222; vertical-align: top;
    margin-left: 80px;
}

.list .nav-button input { width:auto; height:auto; }
 /* pager */
.list #pager .pager td { height:40px; }
.list #pager .pager .commands { height:40px; padding:4px 0px 0px 25px;}
.list #pager .pager .info { padding:4px 25px 0px 0px; text-align:right; }
/** Other classes **/
.hidden { display:none; visibility:hidden; }
.error { color:#ff0000; }
#clear {clear:both;}
/*.list-button { display:inline; float:left; position:relative; margin-left:2px; margin-right:2px; width:40px; font-size: .9em;}*/
.list-button { background-position: 0% 50%; background-repeat: no-repeat; padding-top: 2px;
               width:25px; float:left; font-size: .9em; height:18px; }
/** Icons **/
.icon { background-position: 0% 50%; background-repeat: no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 3px;font-size: .9em; line-height:22px;}
/**.icon-add { background-image: url(images/add.png); }**/
.icon-add{ background-image:url(images/add-b.png);}
.icon-back{background-image:url(images/back.png);}
.icon-insert { background-image: url(images/insert.png); }
.icon-edit   { background-image: url(images/edit.png);  }
.icon-cancel { background-image: url(images/cancel.png); }
.icon-update { background-image: url(images/update.png); }
.icon-delete { background-image: url(images/delete.png); }
.icon-clear  { background-image: url(images/clear.png); }
.icon-select  { background-image: url(images/select.png); }
.icon-first  { background-image: url(images/first.gif); }
.icon-prev   { background-image: url(images/prev.gif); }
.icon-next   { background-image: url(images/next.gif); }
.icon-last   { background-image: url(images/last.gif); }
.icon-phone  { background-image: url(images/phone.png); }
.icon-print  { background-image: url(images/print.png); }
.icon-edit-b   { background-image: url(images/edit-b.png);  }
.icon-cancel-b { background-image: url(images/cancel-b.png); }
.icon-update-b { background-image: url(images/update-b.png); }
.icon-delete-b { background-image: url(images/delete-b.png); }

#InsertRow {display:none;}
#InsertRow td {background-color:#dee3ff; border:none;}
#EditRow td {background-color:#dee3ff; border:none;}
#SelectedRow td {background-color:#dee3ff; border:none;}

i insert a "insert template" for the new entry in the list view
so the issue is
when i dont add new entry the list view is proper in mozilla t when i click on the link to made new entry the coloumn in which insert template will be appear become streched becouse of tha all coloumn become streched and the whole list view become streched
this happens onlly in mozilla bt in IE it is proper.
plz help me out what should i do
i mstucking in this vry badly.

thanks and regard
subiya