All That (Conditional Comment) Malarkey

If you can help out by checking across a range of pages and posting links to screenshots, I'll be unconditionally in your debt.

Back in October 2005, the Internet Explorer team urged developers to begin removing CSS hacks in favour of conditional comments. As you may have seen, my site behaves rather oddly in IE7 and so for testing purposes I have done exactly that and removed all * html from my CSS.

As Markus Mielke of the IE team stated back then,

We're starting to see the first round of sites and pages breaking due to the CSS fixes we have made. We would like to ask your help in cleaning up existing CSS hacks in your pages for IE7.

and boy did my site cause issues with the IE7 Beta Preview as the screenshots on Flickr have demonstrated.

Conditional comments

Now to establish whether the issues were caused by the * html used to feed the 2Tone 2Old black and white design, or by issues with IE7's support for CSS, I have implemented conditional comments on all pages of the site.

<link rel="stylesheet" type="text/css" href="/assets/css/fruit.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/assets/css/cream.css" />
<![endif]-->

Doing so took less than five minutes thanks to Find And Replace in skEdit and the fact that I had included all references to my three CSS files in an MTTemplate Module (include file). The lesson learned here was that including CSS calls in a separate included file will enable speedy addition (or removal) of conditional comments as IE7 develops past the current Beta Preview.

So now to see if this step helps IE7 along the way to rendering my site as I had intended, the same as Firefox, Opera and Safari? Being a nomadic Mac user at the moment it's not possible for me to check the results.

So if you have IE7 Beta Preview installed and can help out by checking across a range of pages, and posting links to screenshots on your server or links to screenshots on Flickr (tag your photos with ie7malarkey), I'll be unconditionally in your debt. :)


Replies

  1. #1 On February 9, 2006 08:42 PM Aaron Gustafson said:

    Ask and ye shall receive. Better, but not good I'm afraid.

  2. #2 On February 9, 2006 08:50 PM Michael Hessling said:

    Hrm. Here you go: now in full color.

  3. #3 On February 9, 2006 09:04 PM Andrea said:

    skEdit! Have you seceretly joined the Mac ranks? :)

  4. #4 On February 9, 2006 09:10 PM Malarkey said:

    @ Andrea: "skEdit! Have you seceretly joined the Mac ranks? :)"

    Yup, I've been the proud owner of a perfect 12" iBook for a while now ;)

  5. #5 On February 9, 2006 10:59 PM Ariel Burone said:

    As Molly says: Don't panic about IE7
    But...

    It breaks in thunderbird!
    yeah, I use Thunderbird to read feeds and this is what I get :-(

    Moreover, I can't resize the text with control+mousewheel in thunderbird, firefox and opera

    BTW here is your IE screenshot

  6. #6 On February 10, 2006 12:02 AM Steve said:

    Molly also says:
    "Microsoft's goal in asking you to look at your sites has, in my opinion, far less to do with developers getting their sites ready than finding bugs in the IE7 release."

    Is it not reasonable to assume Microsoft should be finding and eliminating bugs via WaSP's Acid Test? I would have thought it more appropriate to first ensure the rendering engine handles web standards properly before releasing anything to the public.

  7. #7 On February 10, 2006 09:16 AM Mats Lindblad said:

    I agree with Steve, calling something a Beta, albeit being a preview, is just bad terminology. Firefox Deer Park was an alpha when they made it available and it worked better than IE7BetaPreview.

    Beta means it's stable but may be missing some features and may change before release. IE7 is NOT stable. I say this because I think a browser should be able to render HTML pages properly to have the right to call itself stable.

    That being said, I was wondering how Karova.com looks in IE7BetaPreview?

  8. #8 On February 10, 2006 09:51 AM Malarkey said:

    Just to clarify, I have implemented conditional comments here purely for testing purposes and to help isolate which CSS rules are causing the IE parser problems.

    I also think that in an ideal world, the Beta Preview would have been more or less complete. But I'm also glad to see the IE team's progress and the standards support which they have achieved already and firmly believe that the best approach is to wait and see what the realities of IE7 will be. Making time consuming and costly changes to sites now, based on this release would be pointless.

  9. #9 On February 10, 2006 02:27 PM Keith McLaughlin said:

    Here are some more screenshots from IE7B2:
    http://flickr.com/photos/23276011@N00/sets/72057594062175920/

  10. #10 On February 10, 2006 08:29 PM Johann Phillips said:

    I second Mats Lindblad's comment; it would be interesting to see how karova.com performs in the IEBeta7 Preview. Anyone with a screenshot?

  11. #11 On February 10, 2006 11:04 PM Neil Crosby said:

    A Karova screenshot

    From my quick glance it looks good - there's a bit of missing white space, but nothing drastic. Had a quick glance at another couple of pages too, and didn't see anything amazingly crazy.

  12. #12 On February 11, 2006 02:49 PM Johann Phillips said:

    Cheers for that. Looking at the screenshot, Karova's far simpler CSS has definitely fared better than the Stuff & Nonsense site's attribute selectors etc. in IEBeta7.