DataGrid: strange gap between headers and first row

[iceh]

I have a very simple hello world like example for a datagrid:

Code:

<table id="dg2"></table>
<script type="text/javascript">
    $('#dg2').ready(function () {
        $('#dg2').datagrid({
            fit: true,
            fitColumns: true,
            singleSelect: true,
            columns: [[
                { field: 'AccountID', hidden: true },
                { field: 'code', title:'Code', width:100, fixed:true },
                { field: 'name', title: 'Name', width: 100, fixed: true },
                { field: 'price', title: 'Price', width: 100, align: 'right', fixed: true },
                { field: 'padding', width: 100, fixed: false }
            ]],
            data: [
		        { code: 'value11', name: 'value12', price: 'value13' },
            
		        { code: 'value21', name: 'value22', price: 'value23' },
	        ]
        });
    });
</script>

I have some nested layouts and inside a center there is a panel.
The datagrid get's loaded in the panel by ajax by a user event.


I get a very strage gap between the first row and the headers.

[stworthy]

Please provide your nested layout code. This will be helpful to find out the problem.

[iceh]

Hey stworthy,

thx - I'll provide a demo page.

[iceh]

jEasyUI = Easy fix!

Microsoft in their great wisdom decided to setup a default CSS file for ASP.Net MVC projects.

This caused the strange gap.

[DN]

So, is there a way to remove the MS' CSS reference?  How did you fix the problem?

I have the same issue with accordion.  All <div> inside a accordion are separated by a gap.