[SOLVED]Viewport margins not working in Internet Explorer

**dillon** · 25 Nov 2009 1:00 PM

Hi everyone,

Here is a very simple layout which works in FF but doesn't have margins in IE 7.

Code:

<html><head><title></title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
	var viewport = new Ext.Viewport({
		layout:'border'
		,style:'margin: 50px 50px 50px 50px;'	
		,items:[{
				region:'north'
				,height:50		
			},{
				region:'east'
				,width:50
			},{
				region:'south'
				,height:50
			},{
				region:'west'
				,width:50
			},{
				region:'center'
		}]
	});
	
});
</script>
</head><body></body></html>

It is set up so you can drop it in the examples folder to test.
This seems so simple and yet no matter what I try I am unable to get the margins to display in IE.

Thanks for the help,
-dillon

**dillon** · 26 Nov 2009 5:06 AM

I added a doctype to my page and that has partially fixed the problem. The Margins now appear but the right hand side of the viewport is cut off and appears to be overflowing outside the right margin. Here's the code with the doctype included:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
  
	var viewport = new Ext.Viewport({
		layout:'border'
		,style:'margin: 50px 50px 50px 50px;'	
		,items:[{
				region:'north'
				,height:50		
			},{
				region:'east'
				,width:50
			},{
				region:'south'
				,height:50
			},{
				region:'west'
				,width:50
			},{
				region:'center'
		}]
	});
	
});
</script>
</head><body></body></html>

**CrazyEnigma** · 27 Nov 2009 10:01 AM

I've noticed in the ViewPort or Portal Example that the margins are shifted, and in the config there is both margin and cmargin specified, is it for this reason?!?

Code:

margins: '50 50 50 50',
cmargins: '50 50 50 50',

**CrazyEnigma** · 27 Nov 2009 10:20 AM

cmargins does nothing, but margins do, and they are specified within each panel.

Code:

items: [{
    region: 'north',
    margins: '50 50 0 50'
},{
    region: 'east',
    margins: '50 50 50 0'
},{
    region: 'south',
    margins: '0 50 50 50'
},{
    region: 'west',
    margins: '50 50 50 0'
},{
    region: 'center',
    margins: '5 5 5 5'
}]

I am assuming you want a 50 px border around your viewport.

**dillon** · 27 Nov 2009 11:27 AM

Thank you, it never occoured to me to set the margins for each region.

**aw1zard2** · 27 Nov 2009 12:40 PM

cmargins = collapsible margins

[SOLVED]Viewport margins not working in Internet Explorer

Thread Tools

Search Thread

Display

[SOLVED]Viewport margins not working in Internet Explorer

[SOLVED]Viewport margins not working in Internet Explorer