jQuery Grid Plugin - jqGrid

i have two grids on a page and in Internet Explorer both are displayed. In FireFox only one grid is displayed which is the top grid. The bottom grid is not showing at all. What is wrong?

The grid code is added below

The top grid code is

            jQuery("#Topic").jqGrid({
                url: '/Tracker/GetTopicData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['CreationDate', 'TopicId', 'Company', 'Subject', 'Topic', 'From', 'To', 'Read'],
                colModel: [
                  { name: 'CreationDate', index: 'CreationDate', width: 100, align: 'left', editable: true },
                  { name: 'TopicId', index: 'TopicId', width: 75, align: 'left', editable: true },
                  { name: 'Company', index: 'Company', width: 75, align: 'left', editable: true },
                  { name: 'Subject', index: 'Subject', width: 75, align: 'left', editable: true },
                  { name: 'Topic', index: 'Topic', width: 210, align: 'left', editable: true },
                  { name: 'From', index: 'From', width: 100, align: 'left', editable: true },
                  { name: 'To', index: 'To', width: 100, align: 'left', editable: true },
                  { name: 'Read', index: 'Read', width: 50, align: 'left', editable: true },
                ],
                pager: jQuery("#pager"),
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'Company',
                sortorder: "asc",
                viewrecords: true,
                imgpath: '/scripts/themes/steel/images',
                caption: '<b>Topics</b>',
                onSelectRow: function (ids) {
                    if (ids != null) {
                        alert('we got here');
                        jQuery("#Conversation").clearGridData();
                        var data = $("#Topic").getRowData(ids);
                        var strquery = '?id=' + data.TopicId + "&sidx=Conversation&sord=asc&page=1&rows=10&filter=''&filtervalue=''";
                        jQuery("#Conversation").setGridParam({ url: "/Tracker/GetConversationData/" + strquery })
                        //jQuery("#Conversation").setGridParam({ url: "/Tracker/GetConversationData/" + data.TopicId, page: 1 })
                        .setCaption("<b>Test</b>")
                        .trigger('reloadGrid');
                    }
                }
            }).navGrid(pager, { edit: false, add: false, del: false, refresh: false, search: false });

            THE BOTTOM GRID CODE IS

            jQuery("#Conversation").jqGrid
            ({
                //height: 100,
                datatype: "json",
                colNames: ['Creation Date', 'ConversationId', 'Company', 'Conversation', 'From', 'To', 'Read'],
                colModel:
                [
                  { name: 'CreationDate', index: 'CreationDate', width: 100, align: 'left' },
                  { name: 'ConversationId', index: 'ConversationId', width: 75, align: 'left' },
                  { name: 'Company', index: 'Company', width: 130, align: 'left' },
                  { name: 'Conversation', index: 'Conversation', width: 190, align: 'left' },
                  { name: 'From', index: 'From', width: 100, align: 'left' },
                  { name: 'To', index: 'To', width: 150, align: 'left' },
                  { name: 'Read', index: 'Read', width: 50, align: 'left' }
                ],
                rowNum: 5,
                rowList: [5, 10, 20],
                imgpath: '/scripts/themes/steel/images',
                caption: '<b>Conversations</b>',
                pager: jQuery('#ConversationPager'),
                sortname: 'Conversation',
                viewrecords: true,
                sortorder: "desc"
                        }).navGrid('#ConversationPager', { add: false, edit: false, del: false, refresh: false, search: false });