The markup

The markup I was generating was based on Flash Satay. Including this as static markup in a page works fine. Simple example below…

<object type='application/x-shockwave-flash' data='test.swf' width='420' height='155'>

    <param name='movie' value='test.swf' />

</object>

DOM approach that chokes IE

The following approach causes IE to choke…

<script type="text/javascript">

    var object = document.createElement('object');

    object.setAttribute('type', 'application/x-shockwave-flash');

    object.setAttribute('data', 'test.swf');

    object.setAttribute('width', '100');

    object.setAttribute('height', '100');

    var param = document.createElement('param');

    param.setAttribute('name', 'movie');

    param.setAttribute('value', 'test.swf');

    object.appendChild(param);

    document.body.appendChild(object);

</script>

The solution / workaround

For some reason if the object tag + params are parsed at the same time everything works fine, so the solution involves using the alternate approach to manipulating the DOM – innerHTML. This wouldn’t have been my first choice given the situation, but it seems to be the only way to get this working. A version that works in IE…

<script type="text/javascript">

    var fragment =

        "<object type='application/x-shockwave-flash' data='test.swf' width='100' height='100'>" +

            "<param name='movie' value='test.swf' />" +

        "</object>";

    var container = document.createElement('div');

    container.innerHTML = fragment;

    document.body.appendChild(container);

</script>

This achieves the same end result – a DOM element node that can be inserted anyway you wish, but avoid the problem in IE.

Something that totally slipped past me is that Firefox 2.0 has also just been released! I have no idea what’s new just yet, but I love this little browser so I’ll be installing today. I think you should too.

One of the hacks used to get around this was to apply height: 1px to an element (in a hacks file, served only to IE6 via conditional comments). As IE6 treated height like min-height, this would have no adverse behaviour, but would result in haslayout resolving to true for the element.

This morning I came across my first strange rendering issue in IE7 due to haslayout being false on a container element. I think a lot of the quirks have been fixed, but just be aware that the engine can still render differently according to haslayout. The previous height:1px fix is no longer applicable, as IE7 quite correctly respects any absolute height that you specify.

The fix in this case was to set min-height: 1px, which is another attribute that will now result in haslayout being set. In our case this had no adverse effect on the desired rendering, and therefore was a suitable fix. The actual problem was minor – 1px of extra padding on an element for no good reason.

I think in a lot of cases setting a min-height value would be a good approach (obviously this can be abstracted to a seperate file and served with conditional comments). However this is a fairly unobtrusive fix, so could stay with the core set of instructions without polluting the water too much.

This is a bad way to go. Each problem that I’ve looked at so far, IE7 is actually rendering correctly based on the instructions it understands. We just fixed a big layout problem where the root cause was a container div not stretching to contain it’s floated children. However this was the correct behaviour. Based on the instructions that IE7 had parsed and understood, it was rendering correctly.

The fact that those instructions didn’t arrive at the desired layout was the problem, not the browser rendering. By taking the time to diagnose the problem and understand why it was rendering in a certain way, you can solve the root issue rather than adding a new layer of hacks on top of broken instructions.

Generally IE7 will behave in a very logical way – it’s really worth taking the time to figure out why something looks wrong, rather than jumping straight in and hacking.

UPDATE: the particular issue we were looking at was how to get an element to contain it’s floated children. This has been discussed already on 456 Berea Street and Malarky.

I developed a (probably quite sad) affection for Firefox due to the advanced state of it’s rendering engine and CSS support, but I think IE7 is actually an amazing achievement. To be in a situation where a number of different browsers running on different platforms can render in a consistent way is a big milestone. I now feel like I should also have an IE7 t-shirt and wear them on alternate days (although wearing FF regalia to TVP does seems a little rebellious).

So it looks like the major pain in web development is slipping away. The fight for web standards is almost starting to seem retro, because of the prominent awareness of all the issues in the general populous. I really enjoyed going to the @Media event this year, but it seemed like the speakers were struggling to cover material that people weren’t already aware of. This was a massive difference from the same event the previous year.

I’m extremely interested to see how Firefox develops in response to the IE7 full release. I think competition is extremely healthy, and will ensure that the renewed energy in the development of IE continues in the future.

In CSS terms I think my personal favourite is proper implementation of width and height, and full support for min-width and max-width. Simple, but so welcome!

I’ve been following the improvements to the CSS and rendering engine fairly closely, but I hadn’t really expected the overall product to kick ass. I love Firefox. Really. Even have the t-shirt. I’m now considering leaving it swimming in the gutter and running off with IE7.

From an initial look it seems to be leagues ahead of the last release. It provides two different zoom modes – the usual text size increase, but also an Opera style full page zoom. I think my favourite feature is the tab overview page which displays a thumbnail view of each tab that updates in realtime as the pages change.

It seems like the whole attitude towards development of the product has changed over the past year or so, and the commitment to better support of the CSS standard is really encouraging. All of the sites that I’ve developed just work straight off, because the browser is moving closer to the standard that the sites validate to. That is actually quite a significant achievement for a major new browser release.

I think I was expecting some level of pain with a new flavour of browser on the block, but so far everything looks peachy. Give it a go and see what you think (well… windows users). I’ll decide whether or not to stab Firefox in the back over the next few days.

Information about the new features is available over at the IE Blog. Still no concrete details around release date for the final version, but it looks like the second half of the year.