PDA

View Full Version : aligning an image above the other in predefiend two div in a panel in IE



mxu
24 Apr 2008, 8:15 AM
I add html emelemt as below in a panel creation config.
_instance_RulerPanel = new Ext.Panel({
egion: 'north',
contentEl: 'AnalysisRuler',
...
html: '<div id=\"divID1\" class=\"hapmap-rr-div-align\" ></div>' +
'<div id=\"divID2\" class=\"ruler-div-align\" ></div>',
...})

/******CCS classes *****
.ruler-div-align {
margin: 0px;
padding-left:42px;
padding-top:2px;
}
.hapmap-rr-div-align {
margin: 0px;
padding-left: 0px;
padding-top:0px;
padding-bottom:0px;
}
***************/
...
then
...
var URL4Div1 = '...';
var URL4Div2 = '...';
var ele4Div1 = Ext.get('divID1');
var ele4Div2 = Ext.get('divID2');

var loadhtml = ['<img align=\"left\" border=0 src=\"',URL4Div1,'\" />'].join('');
ele4Div1.update( loadhtml , true);
loadhtml = ['<img align=\"left\" border=0 src=\"',URL4Div2,'\" />'].join('');
ele4Div2.update( loadhtml , true);

on FF, two image are loaded with the image of URL4Div1 on the top and the image of
URL4Div2 but on IE7, the two images are alinged shoulder-by-shoulder instead of
the frist image is on the top of the second image,
i.e., the he image of URL4Div2 is aligned to the right of the image of URL4Div1

how should I fix the problem on IE ?