Charting IE7b2

Published 18 years, 9 months past

So IE7 beta 2 is out.  As you might expect in a beta, it has some things that don’t work as one might hope, whether due to long-standing behaviors or brand new bugs.

I’ve said it before, and I’ll say it again: don’t panic.  Trying to fix a site that’s “broken” in IE7b2 is kind of like deciding to raze your profitable gas station just because you heard car companies are experimenting with hydrogen fuel cells.  When the final version of IE7 comes out, then you can worry about what to do.  Maybe your site won’t be “broken” any more, and you won’t have to do anything.

In the meantime, what you should do is figure out what’s causing the problem you’re seeing in b2, create a very minimal test case that causes the problem, and submit that to Microsoft.  By doing that, you give them a chance to identify the problem and fix it before IE7 goes final… at which time, you won’t have to do anything about your site, because it won’t be broken.

That’s if they fix the bug in question.  They might not; they don’t have infinite time and energy.  But I can absolutely guarantee that they’ll never get around to fixing a bug nobody told them about.

In the CSS world, there are some points of concern, including bugs that are new to IE7b2.  The css-discuss community has started collecting information over on the wiki, and if you have test cases that demonstrate CSS bugs in IE7, you should feel free to add information and links to that page.

Before you do, though, make sure to observe the following (adapted from my post to css-discuss):

  1. Make absolutely certain you’re testing IE7 beta 2.  IE7b1, which is available for download on various sites, had no known CSS enhancements.  It did not support CSS2.1 selectors, or fix any bugs on which CSS hacks depend, or just about anything else.  If you test with IE7b1, you’re wasting your time.  Again, be SURE you’re testing with IE7b2.

  2. If you’re testing property, value, or behavioral support in IE7, make absolutely certain that your test case uses no hacks, filters, conditional comments, or other measures.  If you’re testing float margin-doubling, for example, but you still have in a CSS hack targeted at IE6, you might get completely spurious results. Make your tests as simple as humanly possible while still showing the problem.

  3. If you’re testing support for hacks, filters, or conditional comments in IE7, try to make sure you’re testing using simple effects. For example, here’s how I’d test for IE7 support of a child combinator: 

       p {color: red; font-style: italic; font-weight: normal;
      text-transform: none;}
   div>p {color: green;}
   div > p {font-style: normal;}
   #test>p {font-weight: bold;}
   #test > p {text-transform: uppercase;}

   <div id="test"><p>Bold uppercase green</p></div>
   <p>Italic normal case red</p>

    This approach uses property/value combinations that we all know IE/Win has supported for a long, long time.  If I tried to test with widths and margins and padding, I’d be concerned that a box model bug was sneaking in and making me think there was a selection bug.  With the color-font-text approach, this is far less likely.  (Not non-zero, but close.)

    Similarly, to test arbitrary-element hover, I’d do nothing more exciting than: 

        p:hover {color: green; background: cyan;}

  4. If you find a new bug, as Al Sparber has with the a:hover/@import problem, absolutely document it with a basic test case (as Al did) and feel free to ask others for confirmation.  But remember the previous points when you construct your test case.

The goal of all this isn’t just to make sure Microsoft knows about every CSS bug under the sun, though that certainly wouldn’t hurt.  What I also hope to see happen is that we get an idea of what’s new, what’s broken, and what absolutely must be fixed.  To pick a hypothetical example, suppose it was discovered that in fixing float margin-doubling, IE7 broke clearing behavior.  That would absolutely have to get fixed before IE7 final.  Doing so would be far more critical than, say, adding support for generated content, or even fixed positioning.

Again, don’t panic, but please do help find any bugs or other problems in IE7b2, so that we have a chance of seeing the problems corrected.

Addenda: so just after I posted this, I found out about the IEblog post What’s New for CSS in Beta 2 Preview? and the in-progress MSDN technical note Cascading Style Sheet Compatibility in Internet Explorer 7.  Those might come in handy as a baseline of “here’s what I should see” while you work to find out what you actually see.

Comments (31)

  1. As noted in the IEBlog, you must have a proper DOCTYPE declaration before IE7 features kick in: http://blogs.msdn.com/ie/archive/2006/02/02/523679.aspx

  2. Thank you for posting the link to Al Sparber’s bug, I ran into that one a few days ago and couldn’t figure out how to reproduce it on a small test case. I did everything *except* I had put my CSS inline :)

  3. Oh yeah, and if you’re using clearing divs with zero-heights to clear your floats at all, be prepared for entire sections of your page to disappear. Nice testing.

  4. Mike: got a nice simple test case to post on the wiki page and otherwise bring to Microsoft’s attention? Even if it’s been reported by others, the more people who report a bug, the higher its priority will become.

  5. For making test cases, it’s far better if you only test one feature per page, with each test as a separate element. So instead of testing each variant of the child selector on the same P element, use a separate p element for each and, where possible, make the pass condition obvious for every single test, such as using a choice between red and green. e.g.


    p { color: red; }
    #test1>p { color: green; }
    #test2 > p { color: green; }

    The CSSWG has published some excellent guideliens for writing test cases.

  6. Eric,

    Do you want to confirm the bug I found with the label tag? Should this be posted on the wiki?
    http://www.bogglethemind.com/index.php?itemid=14

  7. Speaking of doctypes, can anyone confirm for me IE7’s behaviour when text appears above the DTD? For instance, I had the string

    on all my pages until I heard IE6 was thrown into quirks mode when any text appeared above the DTD.

  8. Interesting that there’s a horizontal scrollbar when viewing this site in IE7b2. ;)

  9. There is a CSS filter that works for all versions of Internet Explorer, including IE7. You can read about it here:
    The IE7 CSS Hack

  10. There is a horizontal scrollbar on this page in FireFox 1.5 as well. Can’t go blaming MS on that one then I guess.

  11. Pingback ::

    IE 7 als Standalone - Markup: Webdesign, Webstandards und Accessibility

    […] m, um bei evtl. nachfolgenden kleineren

  12. Pingback ::

    Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Charting IE7b2

    […] re « CSS Hacks In IE7 Charting IE7b2 Charting IE7b2 from Eric Meyer – Don’t Panic! This e […]

  13. So far all the designs I’ve made remain fully intact when I view them with IE7 beta2. So I’ll be very interested to check the final IE7 version to see if they remain unflawed.(I’m optimistic the odds should be in my favor)

  14. Pingback ::

    Edwinistrator » Blog Archive » Internet Explorer 7 beta 2

    […] lemaal niet verwerkt is, of erger nog, wat niet meer werkt wordt snel langer en langer. Eric Meyer: http://meyerweb.com/eric/thoughts/2006/02/03/charting-ie7b2/ Gathering of Tweakers: http://gathering.tweakers.net/forum/list_messages/1056539/0 […]

  15. Eric wrote:

    When the final version of IE7 comes out, then you can worry about what to do.

    I would suggest that that’s leaving things a little late.

    As Eric said, doing site rework now is madness, because IE7 beta 2 Preview very clearly is not
    a beta     in the correct sense of the term, because such a lot seems to be still missing when compared against the list of fixes and enhancements already published. And a lot will probably have changed by the time Beta 2 arrives, so basing design decisions on current bugs is just going to cause confusion.

    So what can and should we be doing now?

    Review filters/hacks. We should be reviewing our CSS filters/hacks now, and I would argue phasing them out. Conditional comments are strongly recommended. Microsoft has rightly issued several calls to action in this respect. But apart from possibly reorganising your CSS filters/hacks into a cleaner scheme, I would suggest that “review” should mean exactly that for the present, and no-one should start trying to implement new hacks right now or start fiddling with existing ones.

    Think about strategies and opportunities. What we can usefully get from the current preview release and from MS’s published hitlists is some ideas about future design strategies.
    For example, should we use px font-sizes with IE7 (“yes”, I would suspect), as opposed to percentages/ems/keywords.

    Test to help MS, if you feel generous. MS can probably use some help, but this should be low priority. For example a couple of my own reports of CSS parsing bugs, such as new [attr] selectors being broken, and the whitespace with :first-line/:first-letter which was clearly something that Microsoft had attempted to fix and yet had still got things wrong, a bug that has been incorrectly reported as “fixed” on several websites.

    Be watchful regarding direction. Campaign. Aside from helping out with testing, we can keep an eye on the set of changes/fixes that MS is proposing. I expect there to be cases where “if MS fixes/changes feature A, then practically we will also need to have new feature B”, and we need to be watchful for this and pressurise MS to do the right thing. (An example might be various questionable changed features relating to floats.)

    Regards,

    Cecil Ward.

  16. Pingback ::

    Yud Media | Web Design and Marketing » Don’t panic!

    […] Home Page. Don’t panic! Posted by Giorgio Baresi, February 6 CSS guru Eric Meyer on IE7 b2. IE7, CSS Leave a reply Name (required) M […]

  17. I feel doing a simple test like Eric suggests for p:hover isn’t quite enough. Often bugs relate to complex layouts where one element triggers an effect to fail. So I would suggest creating a page with things like a div inside a float, a div inside a frame, differently positioned divs, and as many real-life examples as you can construct. Then see if the hover works no matter where the element resides. Try different elements too, such as div:hover, span:hover, etc. You never know when one element may fail. (Does abbr:hover work?)

    There is a horizontal scrollbar on this page in FireFox 1.5 as well.

    I’m not seeing that myself, even down to 800 x 600. I’m using Windows XP.

  18. Pingback ::

    Easy Reader » Blog Archive » More on IE7 Beta 2

    […]

    More on IE7 Beta 2

    Eric has a very enlightened post for those of you out to document bugs in IE7 Beta 2. He also echoed my feelings that […]

  19. There is a horizontal scrollbar on this page in FireFox 1.5 as well. Can”t go blaming MS on that one then I guess.

    But not in Firefox 1.501!!!

  20. The huge horizontal scrollbar visible in IE7b2 is due to new bugs.

    #thoughts #rss-tb { overflow: hidden; zoom:1; …}

    #extra { overflow: hidden; …}

    should do.

    Time for another bugreport.

  21. A word about “simple tests”. I have already reported a couple of CSS parsing bugs. Various other reported bugs have demonstrated that it is likely that other bugs will turn up which can mess up tests, in the sense that tests can fail for the wrong reasons or can give a false ‘success’ result.

    For this reason, its a good idea to consider ‘testing around’ the area you wish to look at. The results from some of the published tests aimed at establishing whether CSS features are supported or not are perturbed by the presence of ‘irrelevant’ or ‘semi-relevant’ parsing bugs.

    Cecil Ward.

  22. There’s no such property as ‘zoom’ ?

    Linux Firefox 1.5.0.1 / GNOME Ubuntu has the horizontal scrollbar.

  23. Zoom is a filter that works in IE5.5+. It is useful in that it enables pixel fonts to be enlarged, along with any other element. Alas it can get messy; I don’t think Microsoft finished implementing it properly. The good news is, IE7b2 now has a drop-down zoom menu, that enlarges the whole screen! So your layout is kept intact, like when you zoom in Opera.

    To use the zoom filter in IE6, just give it a value without a suffix. So “2” gives you 200%. “1.5” is 150%, and so on.

    Another point to mention here is that applying zoom to an element also triggers “hasLayout” (the solution to many IE bugs). You can apply “zoom:1” if you don’t want the element enlarged.

  24. Beta 2 should come with the words “Don’t Panic” printed in large, friendly letters right on the cover… :-)

  25. Pingback ::

    Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (8/2/06)

    […] Some links for light reading (8/2/06) February 8th, 2006 Charting IE7b2 User Zoom in IE7 Opera 9 Preview 2 – Anne’s Weblog Opera 9 P […]

  26. Pingback ::

    Bernhard Huber Warszawa SEO » Blog Archive » Internet Explorer 7 Microsoft : TEST

    […] .com/2006/02/03/security-issues-and-bugs-in-ie-7/ http://ben-ward.co.uk/journal/trying-to-test-ie7/ http://meyerweb.com/eric/thoughts/2006/02/03/charting-ie7b2/ http://ajaxian.com/archives/ie-7-preview-release-download-test-pray http://zeo.unic.net.m […]

  27. Pingback ::

    Jad’s thoughts » Some links for light reading

    […] nor to format this post but from my previous experience, Russ sends only valuable emails. Charting IE7b2 User Zoom in IE7 Opera 9 Preview 2 – Anne’s Weblog Opera 9 Prev […]

  28. Pingback ::

    Girl Gone Geeky » Blog Archive » IE 7 (beta 2 preview)…is it any good?

    […] ed (with I probably assume is will still buggy, but then again it may all change, so there might not be a need to panic), but I can’t help but favour towards opera and fi […]

  29. Pingback ::

    » Überblick: Internet Explorer 7 — cne _LOG Archiv

    […] xisitieren, liste ich sie hier lediglich auf: Eric Meyer selbst gibt Tipps für eine gute IE7-Testumgebung. Auch Microsoft unterstützt Webdesigner und bietet Hilfe zur CSS-K […]

  30. Pingback ::

    css 英文相关文章以及站点 - 第8音 Design Everying

    […] Charting IE7b2 […]

  31. […] The goal of all this isn”t just to make sure Microsoft knows about every CSS bug under the sun, though that certainly wouldn”t hurt. […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview