Details on our CSS changes for IE7

IEBlog The Windows Internet Explorer Weblog
Common Tasks
Search
  • Advanced search options...
  • Search
Recent Posts
Tags
Archives
Archives
IE Sites
Other Sites
MSDN Blogs > IEBlog > Details on our CSS changes for IE7

Details on our CSS changes for IE7

22 Aug 2006 3:03 PM

We are currently locking down IE7 for shipping and I wanted to give an update on the CSS work that went into IE7. Chris originally outlined our plans for IE7, and we listened to a lot of feedback (blog, connect database, conferences, our WASP partnership etc.)  to help us address the most grievous bugs and prioritize which features to put in for IE7. I like to thank especially the contributors on this blog for their participation. Your feedback made a difference in deciding what issues to address.

We understand that we are far from being done and we know we have still a lot of work ahead of us.  IE 7 is a stepping stone in our effort to improve our standards compliance (especially around CSS). As an example, in the platform we did not focus on any proprietary properties – though we may try out new features in the future using the official –ms- prefix, following the CSS extension mechanism. We also work very closely with the W3C CSS working group (which I am a member of) to help clarify assumptions in our implementation and drive clarifications into the spec. I really like to thank everyone who helped us here.

In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance.  All this work (with the exception of transparent PNGs) has been done under the <!DOCTYPE> switch only, since all changes required behavioral updates to be more in line what the CSS spec specifies. To preserve application compatibility we will not make any behavioral changes to “quirks mode” as it has been established since IE6.  

Here is the list of CSS features and changes for IE7:

Bugs we fixed

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

  • Overflow now works correctly! (That means boxes do not automatically grow any more.)
  • Parser bugs: * html, _property and /**/ comment bug 
  • Select control: CSS style-able and not always on top
  • Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
  • Addressed many relative positioning issues
  • Addressed many absolute positioned issues
  • % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
  • <?xml> prolog no longer causes quirks mode
  • HTML element truly independent of the Body (now gets its own width, height etc.)
  • 1 px dotted borders no longer render as dashed
  • Bottom margin bug on hover does not collapse margins
  • Several negative margin issues fixed
  • Recalc issues including relative positioning and/or negative margins are fixed now
  • CLSID attribute of <object> tag no longer limited to 128 characters
  • :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
  • Descendant selector now works properly for grand children when combined with other selectors
  • First-line and first-letter now applies when there is no space between word :first-line and opening brace {
  • Pseudo-classes now are working as expected if selector is excluded
  • The :link selector works now for anchor tag with href set to bookmark
  • Addressed !important issues
  • PositionIsEverything piefecta-rigid.htm now works
  • List-item whitespace bug fixed
  • Fixed Absolutely Buggy II
  • Absolute positioned elements now use always correct containing block for positioning and size information
  • Nested block elements now respect all overflow declarations (hidden, scroll, etc)
  • Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
  • <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
  • We no longer lose the image aspect ratio on refresh
  • Cleaned up our ident parsing according to CSS2.1 rules
  • Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
  • And many more

We also extended our existing implementations to comply with W3C specifications:

  • Enable :hover on all elements not just on <a>
  • Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
  • Improved <object> fallback

Finally, we added new features from CSS2.1:

  • Min/max width/height support (also for images, which did not work in IE7b2)
  • Transparent borders
  • Fixed positioning support
  • Selectors: first-child, adjacent, attribute, child
    • A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
  • Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)

Better Standards Support…
But as we’ve been continually reminded, better standards support in IE also means some pages break.  As we struggle to balance the needs of our user customers with the desires of web developers, we need your help.  The only way for us to continue to improve our standards support is to get your help in changing your sites for IE7. We have provided a set of documentation and tools to help you transition your pages to IE7:

Finally, as we’ve talked about before, we have a Web Developer Toolbar, which is a great aid during the development and debugging of a website.

We are already planning for the next IE release and will continue down the road of improving our CSS support.

Markus Mielke
Program Manager

,
Comments
  • William J Edney
    22 Aug 2006 3:27 PM
    Markus -

    Thanks for the update!! This is the kind of information that we need as we try to update our products and sites for IE7.

    As I mentioned in another post yesterday, could you all make a list of the stuff in the CSS 2.1 spec (or well known bugs) that does *not* work, but that you know about and have scheduled for a future release?

    This would be very helpful to those of us who need to know where *not* to spend time trying something that still won't work for IE7. For instance, my list currently consists of:

    - No :focus support
    - Need :active support on all elements that can be activated.
    - No support for display: table* values
    - No support for 'box-sizing' to allow border-box sizing when in strict mode.

    I'm sure other folks have other lists, but having someone at Microsoft keep a complete list would be a *huge huge* help!

    Thanks for all of you and your team's hard work on making all of this happen!

    Cheers,

    - Bill
  • Dean Edwards
    22 Aug 2006 3:43 PM
    That's a fantastic list. Well done.
  • Tino Zijdel
    22 Aug 2006 3:58 PM
    Beside a list of things that are not supported a list of things that are technically supported but incorrectely implemented and thus showing erratical behavior (aka 'broken') would be nice too, although I'm afraid such a list would be way longer than the number of items listed here as 'fixed' ('worked around' or 'hacked' would probably be more accurate).

    On the top of such list I expect to see items such as:
    - Float model is still incorrect in many cases
    - Basic CSS positioning is still incorrect in many cases
    - z-index is still incorrect
    - inheritance is still broken in almost all cases
    - margin-collapsing is still incorrect

    The bugs mentioned on PIE are just the tip of the iceberg when it comes to CSS-bugs in IE6 and you should be aware of that. It should also have made you realize that the actual problem must be far more fundamental, as fundamental as the basic visual formatting model implemented in Trident that is probably still based on CSS level 1 and cannot really handle the added complexity of CCS level 2.

    From this blog-post it looks to me like Trident has only be patched up to work around certain common problems (sure, it makes you look good), but in essence IE7 will still have a very broken CSS-implementation and that makes you look really really bad because it is the last thing developers want.
    Please don't ship a browser that is vastly different from the previous version, but still as fundamentally broken.
  • 22 Aug 2006 4:04 PM
    While all the improvements above are great, and sounds like everything is going along good I can't wait for this to come out to the whole world.

    Out of curiosity, there has been no real mention of some of the other things that IE had in it as well. Will they still be in there has support for them improved, planned to be improved? For example SMILE for the longest time IE was the only browser that even supported SMILE I am honestly not sure of any other browsers that do. It would not suprise me if some have evolved to handle it but it has always remained low off the radar. Just curious. However I will be grad to have all the CSS bugs fixed.
  • Brian Sexton
    22 Aug 2006 4:26 PM
    It is reassuring that you have both worked to improve standards support and recognized that there is still much standards-support work to be done.

    > But as we’ve been continually reminded,
    > better standards support in IE also means
    > some pages break.

    Specifically, pages that were not crafted with those standards in mind or which use browser-specific hacks to make up for the poor standards support in Internet Explorer versions before 7.  If breaking those pages gets standards-ignoring Web developers and publishers to replace their IE-centric HTML/XHTML and CSS with standard HTML/XHTML and CSS, then I say break away and let developers and publishers start cleaning up their messes.

    I may have a little bit of updating to do myself since I have sparingly used conditional comments to hide IE-specific code that may or may not need to be hidden from IE 7, so I may be able to scale back the scope of some conditional comments or remove them entirely or I may need to extend the scope of some conditional comments to include IE 7.  I am leaning toward simply removing them wherever they are no longer needed for IE 7 as I am no more inclined to keep supporting IE 6 now that it is being upgraded than I have been with it languishing for years.

    The one concession I will likely make for Internet Explorer 7 is that I will likely use floats for page layouts rather than the CSS "display" property's "table" and related values (http://www.w3.org/TR/CSS21/tables.html), which are considerably easier to use, but which Internet Explorer 7 still seems to not support.  Aside from that, I am inclined to code for the standards and let whatever browser misbehave as it will.  I am tired of using and seeing browser-specific code for what are supposedly standards-using pages; if the IE team can keep up its momentum, perhaps we won't be needing it much anymore.  Good luck to all of us! :)
  • Nai Isrerred
    22 Aug 2006 4:27 PM
    Digg pages still do not render correctly.
  • Nai Isrerred
    22 Aug 2006 4:28 PM
    Digg pages still do not render correctly.
  • My thoughts » Blog Archive » css-support
    22 Aug 2006 4:31 PM
    PingBack from http://rachit.wordpress.com/2006/08/22/css-support/
  • jace
    22 Aug 2006 4:32 PM
    Can you help us pin down the RC1 release date any closer yet?

    Thanks for the hard work!
  • Ethan
    22 Aug 2006 4:40 PM
    I think RC1 will be released tomorrow, correct?
  • 22 Aug 2006 4:50 PM

    Digg: http://www.digg.com/

    ...STILL Does Not Render Properly, ..."Signed In"!

    :-(
  • Archeious
    22 Aug 2006 4:56 PM
    I guess I haven't been visiting Digg everyday.  Because the site I go to http://www.digg.com renders fine in IE7 beta 3.
  • pauldwaite
    22 Aug 2006 4:56 PM
    You guys rock. Thanks for making IE 7 better than I would have dared speculate a year ago.
  • Tom
    22 Aug 2006 5:04 PM
    Fix the Favicons, PLEASE  !!!!
  • cooperpx
    22 Aug 2006 5:13 PM
    Right on. Good Post.

    [ Shameless linking of a bug + testcase awaiting acknowledgement ]

    Marus, the following isn't always true: "1 px dotted borders no longer render as dashed"

    https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=177532

    It shows something weird under the covers having to do with mixed units. Care to fire a quick comment about its etymology? [ curious ]
Page 1 of 34 (497 items) 12345»