Click here to Skip to main content
15,902,032 members
Please Sign up or sign in to vote.
4.00/5 (2 votes)
See more:
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-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
Geekian_senate 26-Apr-11 19:46pm    
Only with the CSS provided its tough to replicate and find solution to your problem.

1 solution

You should use Mozilla fire bug to dynamically change the CSS and check what is causing the misalignment. Once found the cause you should key in the same change in IE developer toolbar and check for the compatibility. This is the quickest way to fix the cross-browser issues, like the one you mentioned.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900