PDA

View Full Version : [solved] Floating inline elements in IE



Tom23
17 Aug 2009, 12:18 AM
This is more like a CSS question, but I hope you can help me with this one:

First of all, the following HTML code renders fine in all browsers

<html>
<head>
<title>Test</title>
<style>
.tag {float: left; margin: .5em;}
</style>
</head>
<body>
<div style="width: 200px; height: 100px; border: 1px solid black">
<span class="tag">foo</span>
<span class="tag">bar</span>
<span class="tag">baz</span>
<span class="tag">qux</span>
<span class="tag">quux</span>
<span class="tag">corge</span>
<span class="tag">grault</span>
</div>
</body>
</html>
Now, I want to generate the same thing using ExtJS 2.2 (can't use latest version in my project)

var w = new Ext.Window({
title: 'Test',
width: 200,
height: 200,
items: [
{xtype: 'box', autoEl: {tag: 'span', html: 'foo'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'bar'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'baz'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'qux'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'foo'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'bar'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'baz'}, style: {cssFloat: 'left', margin: '.5em'}},
{xtype: 'box', autoEl: {tag: 'span', html: 'qux'}, style: {cssFloat: 'left', margin: '.5em'}}
]
});
w.show();
Of course, this works fine in Firefox, Opera and Safari, but IE won't wrap the items at the window's right border. Any idea what's wrong?

Tom23
17 Aug 2009, 1:12 AM
Ah yea, well, hasLayout strikes again.


zoom: '1'
fixes it all.