Eklog

The Internet Explorer 7 beta 2 has arrived and is available to all.

First, it has to be said, IE7 a good piece of software and Microsoft should be congratulated on their good work. That’s not to say anyone should use it instead of Firefox, but credit where it’s due. (Although no idea whether the security has really improved.)

So is the end of hacking in sight? There’s a useful article entitled ‘stop hacking now or be stopped‘.

IE6 may still need hacks to cater to its own unique box model and the many bugs it contains. A good tutorial on the box model is available at Brainjar.com.

So, the battle, fought hard by geek heroes like Jeff, Holly, John and Eric, has been won, and the occupation begins now. And this time it really isn’t all about the oil.

If you’ve been using conditional comments to make adjustments for the bad models IE6 uses they will still work, your hacks are kept separate from your neat and tidy style sheets, and IE7 won’t know about them. If you’ve been using the parse hack (* html) this will also still work fine, as IE7 will ignore these as well. This method also allows you to keep the hack as you can place it next to the proper styling - so if you make any adjustments you won’t forget to update the hack.

Looking at the frames-without-frames as an example for a layout that only works in quirks mode in IE6, and uses conditional comments to set min and max with or height, it appears this won’t be a problem either. IE7 copes just like any other good browser.

As a side note, it turns out there is already a hack for IE7, produced by Brothercake, called the Triple X hack. Once again, to have to use this is bad bad wrongness.

IE7 will highlight any badly written code. The best way to avoid problems is by following proper standards. The following sites have top quality information:

1. Designing with web standards - Jeffery Zeldman
2. Eric Meyer on CSS - Eric Meyer
3. Positioning is Everything - Holly and John

The last link has more information available online so you don’t have to use a book. They have a great article on how IE7 will affect different hacks.

Looking at http://www.researchkitchen.de/… in IE7, it seems IE7 still collapses the margins. It looks similar to Opera rather than Mozilla in Example 3 and in Example 4 where the body is given padding, a div overlaps the containing block. So what does this all mean for IE7? Er.. good question.

Rob Ballou’s (Style-switcher at Contrastweb.com) has published a clarification and improvement on Chris Clark’s (A List Apart PHP style sheet switcher). The Styleswitcher V2, allows you to give the user control over any individual attribute. Another good solution is the A List Apart PHP style switcher which is used in this site’s PHP tests section.

Sitepoint style switcher is another, more simplified method.

Invasion of the Body Switchers (IOTBS) from Brothercake is an efficient object-oriented style sheet switcher, which offers independent switching of multiple media types, and supports an unlimited number of options and controls. Alterior.net has also created a nice PHP solution.

The main area where style switching becomes really practical is for offering a print and visual impairment style. Another good application as would a fast download setting with minimal images and ornamentation.

This site’s main page has style-switching options in the top right corner. It gives the option of a liquid or elastic layout. There’s also a preview of how the print style will look (the print style needs updating - to include collapsible DIVs so the menu system doesn’t need to be printed yet the style can also be used as a ‘minimal images’ style.) A few site designs that were created in the past have also been included.

The little known, rarely seen, mating dance of the Disco Penguin. Hold the mouse button down for a while then let go to create a zoom in and out effect.

Click to see disco penguin

This site’s flash movies section uses a layout based on the elastic layout from html dog. An Elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices. The article on elastic layouts is at A list Apart - Elastic layout

There’s another couple of good sites with information on using images with elastic designs: 1. www.michelf.com/…liquid-image/ and 2. www.clagnut.com/sandbox/imagetest/

There’s a new breed of elastic liquid layouts. The most exciting is from Gunlaug.no who sets min and max width for Internet explorer using width expressions in conditional comments.