Seven

I have yet to download and install an IE7 beta, but it sounds like it’s actually time to start paying attention to the latest release (Beta 2 Preview). We’re hearing reports from MIX 06 that the browser is essentially done in terms of CSS implementation:

Really interesting stuff from the above links. I’m impressed with what we’ve heard regarding the now-standards-aware IE team. On the flip-side, Roger Johansson brings up an excellent point: whether we’ll need a new way to self-clear floats in IE7.

Wow, this is a bit frightening, as I’ve been using the easy clearing method extensively, finding it to be pretty rock solid and predictable. It’s especially handy to use this to group components that use complicated floats and most importantly keeping them independent as self-contained, bulletproof “modules”. Being self-contained means they’re not dependent on subsequent elements in order to clear, and can then be moved around at will. Handy stuff.

So, it appears we’ll need a way to self-clear floats in IE7 that doesn’t use the still unsupported :after pseudo-element and the now fixed height: 1%; trick that previous versions of IE/Win so lovingly accepted. Here’s hoping there’s an alternative out there (aside from floating the container among others). I’m sure there will be, but even then this particular method would now feature 3 different declarations in order to work across browsers (actually add a few more in if you’d like IE5/Mac to work).

Update: Roger has posted an update, where a solution using display: inline-block; instead of display: inline-table; seems to do the trick for IE7. It’s a tad more complicated as to why this works, so be sure to read Claire Campbell’s informative write-up.

26 Comments

  1. ACJ says:

    IE7, like Opera, actually seems to be supporting display: inline-block. This means that in most cases the only major browser you need the floating mumbo-jumbo for is–somewhat ironically–the Gecko-based. (Does -moz-inline-block work? I haven’t tried that one yet. I could ditch the whole floating-and-clearing shabang for a number of occasions.)

  2. derek says:

    it might be worthwhile to run the ie7 launch script by j. galloway for those uninterested in running ie7 as their main ie browser. nice to see ie is rendering is beginning to render as it should.

  3. john ivanoff says:

    sitepoint has a how to on installing IE7 without ousting IE6 on windows.
    http://tinyurl.com/nykj5
    how to run multiple IE on a xp box http://www.quirksmode.org/browsers/multipleie.html

  4. Mathew says:

    i gotta say that ms is keeping web developers employed as we constantly need to go back to old projects and update them for clients, and charge for them.
    thanks, ms!

  5. Adam says:

    I keep coming back here because I love this site so much, Love your work and books. Keep it up and love the new design.

  6. Mike says:

    FWIW, you new site design and ie7 do not get along. Specifically, the navigation links are mostly hidden.

  7. Adam – Why thanks much!
    Mike – Oh the irony. I have a strong feeling it’s because of the very self-clearning float method that’s described in this entry, and the need to find additional rules for IE7.

  8. Azerbaijan says:

    I’m waiting for official version of the IE7. For now I’m using firefox…

  9. I have tested personally IE 7 beta 2 preview release. (I run also IE 6 and IE 5.5 on my PC using the “multiple explorers on one computer” method).
    The browser itself is still quite buggy, and it’s a Beta 2, so we can sleep peacefully for at least a few more months, until the MS IE team comes with a final release:-)
    Dan, (in relation to comment #6) it’s true, your top navigation is hidden – actually, all of the nav tabs are hidden except for the highlighted tab – for example, while writing this comment in your notebook, the tab notebook is the only visible.
    I’ve checked a couple of my designs in IE 7 beta 2, and changes in the code will be needed, that’s true (unfortunately)…
    …which reminded me the idea of using IE’s conditional comments to serve different CSS stylesheet to IE 7 and (possibly) IE 6 and below – if needed. In this way, problems with css filters could be very easily overcome – just name the IE version you would like to serve the specific stylesheet to, and add the link to the file in in the HEAD part of your html page:)
    Bulletproof method, if you would allow me to use this expression ;-)
    So, let’s wait a little. Long before the final release of IE 7 will be ready to ship out, I am sure that we will find a good method (and a short one!) to resolve the problem with float clearings and the other problems we’ll stumble upon soon, while testing with the new IE:)
    BTW, nice Arkanoid Design, Dan, although…
    …to be frank, I liked more your previous design, and the one before it (the original design, which used minitabs in the top nav, and after that the minitabs edition with possibility to switch to other color schemes), I liked even more! (But it’s your website, so it’s your right to change it as you wish;-)
    Just wanted you to know, that’s all:)

  10. It looks like there may be hope. I just ran across this post on dealing with this issue.

    New clearing method for IE7

  11. Ok, that should have said Roger’s post has been updated with a proposed solution.

  12. Erin says:

    Is it just me or does it seem we will never get away from serving up hacks to properly display web pages?

  13. Sometimes I have mini anxiety attacks thinking about all the sites I have designed for IE and how they might all break with IE7. I just know I’ll get a rush of phone calls and e-mails from clients screaming that everything is broken.
    Whoa, I think I just had another one. Off to get my medication… :)
    We’ll likely need to hack away with IE7 as with previous versions, but it does appear that it’s going to get better. I’ll forever be a Firefox man.
    Looks like your comments box needs a little of this. Nice site, man.

  14. Darren – Thanks for pointing us to the update. It does appear that solution has been discovered. Whew.

  15. Playgame says:

    I have to agree with opinion that IE still not “trustable”. Firefox and it’s addons let’s me feel better…

  16. Ricky says:

    your new design? not new-ish but butt ugly-ish and not because i am looking at it on IE7.

  17. Awesome, thanks, Ricky. I’ll be sure to take the “butt ugly-ish-ness” into account on the next redesign.

  18. Anonymous says:

    I like the new design, although to see it I had to open Firefox (I have both installed for testing my own web pages).
    If you have IE7 then click-hold where you think Home should be and drag it to the text. Then click the text. Do the same for the others (Status bar shows links). It only works untill you close the tab.
    BTW, I did like the old design better, but the navigation bar and the stuff at the bottom is cool. However I would like the search up top. Very annoying to see I don’t want to read this and have to go all the way down if I want to see the latest or search.

  19. Mike says:

    From your blog: “I’m no longer straddling the fixed/fluid fence!”
    That didn’t last too long. Why the stradle?

  20. Ricky: Pfft. Dan is my hero. This design is the dog’s “bits”. :-)
    I’ve not ventured into the land of the Seven yet. I don’t think it’s necessary until it’s a mainstream release. Knowing Microsoft there’s no telling how different the final release will be.

  21. Dodo says:

    wow! great design!

  22. jason says:

    RE: # 16:
    wow ricky, you really think so huh?
    why dont you provide some links to your work, just so all of us can get a good baseline to start judging what “butt-ugly-ish” actually is…
    while dan provides us all with a great resource on beautiful web design and great coding practices, i guess it is only a matter of time before a hater like you comes along and drops a bunk opinon like that.

  23. Britney says:

    Really great design it would take me months to pull something like that off and even still I doubt I could make it look as good. Great Suff!

  24. Will Kelly says:

    Mathew Let me know how you get on attempting to re-charge your clients! :D
    I’m kind of glad I’ve avoided hacks as much as I have, sticking with floated containers and where necessary div clearers (unsemantic I know but effective!).
    Considering that IE6 will still be in major use for years to come and in that time, more and more alternate browsers will come out… I’m hoping the time of hacks is over… oh for one stylesheet! ;)

  25. tristar says:

    hi dan,
    love the site, im half way through your ‘web standards solutions’ book, the only thing im finding hard is to keep reading it – because once i read a bit on on my computer trying it out…..
    keep up the good work,
    regards,
    tristar.
    p.s. i think my friend from the US is just as happy as you the red sox won in 2004, specially after their long drought ;)

  26. Marko says:

    I also avoid hacks, even box model hack(I prefer div inside div) and really hope that new age of webdesign will be hackless.