I've just run into a display glitch in IE6 with the ExtJS framework. - Hopefully someone can point me in the right direction.
In the following example, the bbar for the panel is displayed 2ems narrower than the panel it is attached to (it's left aligned) in IE6, where as in Firefox it is displayed as the same width as the panel.
Can anyone suggest how to fix this?
I seem to be able to work around either by specifying the width of the panel in ems or the padding in pixels, but I assume it would be expected to work as I have it below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var main = new Ext.Panel({
renderTo: 'content',
bodyStyle: 'padding: 1em;',
width: 500,
html: "Alignment issue in IE - The bbar's width is 2ems less than the main panel in IE6.",
bbar: [
"->",
{id: "continue", text: 'Continue'}
]
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>