Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

IE7: CSS Support?

Download

Right click “Save as…”

IE CSS support is a very sticky subject around these parts and out there in the world of web development. A real can o' worms, as they say. Well, how exactly has support for CSS standards improved in IE7? Let's find out, shall we.

Join Technical Evangelist Joshua Allen, Architect Yin Xie, and Program Manager Markus Mielke (who also sits on the W3C CSS Standards Committee) as we drill into what's wrong with CSS support in IE6 (and why) and how we've resolved many of the issues in the latest incarnation of IE. The IE team has done some tremendous work in Trident to help make IE7 more CSS compliant (and therefore predictable) with what web developers expect in a modern browser.

This is a pretty candid conversation with lots of demos. It is also the first in a series of IE7-focused Channel 9 investigations where we focus the interview on a single topic (one broad question). Expect to see "IE7: Security?" in the near future.

Tag:

Follow the Discussion

  • Great video! It's good to see Microsoft finally moving into the world of CSS and XHTML standard support. Web designers all over thank you.

  • RowanRowan Look, no errors.
    CSS fixes in IE7 haven't been much really, they've only fixed the most requested bugs, but haven't bothered to fix all the other little bugs that are just as bad (and missing features). Now there are new CSS bugs in IE7 that we have to watch out for. I'd rather keep working with IE6 for another year to allow enough time for IE7 to get with the standards support of today.

    IE7 is a fix for IE6, and IE8 will be a fix for IE7.
  • Rowan wrote:
    CSS fixes in IE7 haven't been much really, they've only fixed the most requested bugs, but haven't bothered to fix all the other little bugs that are just as bad (and missing features). Now there are new CSS bugs in IE7 that we have to watch out for. I'd rather keep working with IE6 for another year to allow enough time for IE7 to get with the standards support of today.

    IE7 is a fix for IE6, and IE8 will be a fix for IE7.

    You just described Firefox, Opera, Safari, and every other major broswer too.
  • Are any of those demo pages available online somewhere? Particularly the "virtual earth 'lens'" one and the "eagle/shadow" one. They were awesome.
  • Christian Liensbergerlittleguru <3 Seattle
    I always see this zen garden example, but it seems to be non-public. Is there a way to get the example, to do own tests with it? I mean the CSS (of the video) used to mod zen garden.
  • Sven GrootSven Groot Don't worry... I'm a doctor.
    Rowan wrote:
    Now there are new CSS bugs in IE7 that we have to watch out for.

    Weird. I've got this bug filed and created my own example page for it. However, in my example to bug also occurs in IE6, while in yours it does not (I haven't tested yours with IE7). Here's mine: http://www.ookii.org/misc/position_relative_scroll_bug/bug.html
  • Wayne TaylorKryptos Backup People!
    littleguru wrote:
    I always see this zen garden example, but it seems to be non-public. Is there a way to get the example, to do own tests with it? I mean the CSS (of the video) used to mod zen garden.


    Is this what you mean?

    http://www.csszengarden.com/

  • I'd have two more questions. First is wheter controls like the drop down still hover over div's and second is are you already writing code for CSS3 in order to support if from day one or will we have to wait years to adopt it (we'd love columns support Smiley and round borders as well)?

    Also it'd be very nice to know the MS stance on supporting SVG integrated in the browser (just open this with latest firefox) and MathML support?


    That said we'd like to see MathML support on the TabletPC power pack if anyone is listening. Ink + Math = Millions of students taking notes that have some meaning and that buy TabletPC's. Hello, is anyone listening?
  • DMassyDMassy Driving!
    schrepfler wrote:
    I'd have two more questions. First is wheter controls like the drop down still hover over div's and second is are you already writing code for CSS3 in order to support if from day one or will we have to wait years to adopt it (we'd love columns support and round borders as well)?

    Also it'd be very nice to know the MS stance on supporting SVG integrated in the browser (just open this with latest firefox) and MathML support?


    That said we'd like to see MathML support on the TabletPC power pack if anyone is listening. Ink + Math = Millions of students taking notes that have some meaning and that buy TabletPC's. Hello, is anyone listening?


    Hi schrepfler,
    First question - Yes there is a new implementation of the select element in IE7 See http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx This means it will honor the z-index set rather than ignore it and render on top of other elements as it did previously.

    Second question - We've committed to regular and frequent releases of IE moving forward and some CSS3 is already being implemented such as selector work which was logical to do while we were doing CSS2 selector work.

    On MathML support there is an excellent extension available called MathPlayer developed by Design Science experts in Math and MathML.

    Thanks
    -Dave
  • It makes more sense for the IE team to focus on features of CSS that are most useful to web developers like fixed positioning.  Implementing the entire recommendation just to say you did is kind of silly especially since it's full of errata anyway.
  • YinYin
    Hi Rowan

    Thank you for reporting IE issues. The bug you reported in  "new CSS bugs in IE7" is actually not a new issue. In IE 6, the !Doctype switch needs to appear first in the document source to take effect. Therefore the page is recognized as a compat mode document by IE6. IE7 allows !Doctype switch after the XML prologue, so your page is in strict mode if viewed using IE7. In fact, this issue also exists with IE6 if viewed as a strict mode document.





  • ShadowChaserShadowChaser It's not easy programming with paws.

    I agree - great video. I love the max/min widths and heights, as well as the positioning fixes (fixed and absolute). I was fighting with those until 2am just last night! Perplexed

    Brian: As far as I know IE7 does not support XHTML. I believe the reason behind it is that they didn't want to have add XHTML without a full XML parsing engine. They didn't have the time to do it right, and they didn't want to add a broken XHTML parser right off the bat. I don't believe IE7 supports "application/xml+xhtml" yet, but I believe it still can "read" XHTML sent as text/html.

    Server-side applications can check if the browser supports the xhtml content type in the http request and "upgrade" to xhtml if the browser supports it. It's not a perfect solution - All browsers send "*" to say they support all content types, which means the workaround only works in browsers that send application/xml+xhtml along with the "*" content type.

    One disappointment is the lack of Windows 2000 support. Not many developers are going to be able to use these new features when a large segment of the population won't be able to upgrade to IE7. It will take at least another year or two until Windows 2000 use really starts to decline. At least half of the workstations in our office still use it.

    I don't believe there are any technical reasons for it - it's a shame that web developers are effectively being held hostage to force people to move to XP Sad

  • ZippyVZippyV Fired Up
    Very nice code you got there guys:
    - Putting an empty doctype at the beginning: <!DOCTYPE >
    - Putting an <HTML> tag in the middle of the page between the <STYLE> and the <BODY> tags.

    I'm surprised IE actually showed something.
  • Sven GrootSven Groot Don't worry... I'm a doctor.
    Yin wrote:
    Hi Rowan

    Thank you for reporting IE issues. The bug you reported in  "new CSS bugs in IE7" is actually not a new issue. In IE 6, the !Doctype switch needs to appear first in the document source to take effect. Therefore the page is recognized as a compat mode document by IE6. IE7 allows !Doctype switch after the XML prologue, so your page is in strict mode if viewed using IE7. In fact, this issue also exists with IE6 if viewed as a strict mode document.

    Ah, so that's the difference between his and my example. Mine does use strict mode as it has no xml declaration.
  • Charles wrote:
    Well, how exactly has support for CSS standards improved in IE7? Let's find out, shall we.

    Your 'shall we' should have a question mark. Wink[6]

  • ZippyV wrote:

    I'm surprised IE actually showed something.

    I am not, that has always been one of the great strengths of IE.
    It is far more difficult to write a parser that can "read over" mistakes and do its best to display the content as good as possible to the user, than one that just implements the basic rules (think of the inferior mozilla parser).
  • CharlesCharles Welcome Change
    ZippyV wrote:
    Very nice code you got there guys:
    - Putting an empty doctype at the beginning: <!DOCTYPE >
    - Putting an <HTML> tag in the middle of the page between the <STYLE> and the <BODY> tags.

    I'm surprised IE actually showed something.


    To which guys are you referring?
    C
  • YinYin
    Sven Groot wrote:
    
    Yin wrote: Hi Rowan

    Thank you for reporting IE issues. The bug you reported in  "new CSS bugs in IE7" is actually not a new issue. In IE 6, the !Doctype switch needs to appear first in the document source to take effect. Therefore the page is recognized as a compat mode document by IE6. IE7 allows !Doctype switch after the XML prologue, so your page is in strict mode if viewed using IE7. In fact, this issue also exists with IE6 if viewed as a strict mode document.

    Ah, so that's the difference between his and my example. Mine does use strict mode as it has no xml declaration.


    If it's parsed by IE7, there is no difference, because IE7 allows the !Doctype switch is be placed after !XML prologue. However IE6 treats Rowan's page as compat mode document.
  • Xaero_VincentXaero_​Vincent Sexy me
    Hey Charles,

    <Serious_Request>

    Do you think we can have another Vista video?

    I wanted to see the latest build in action and perhaps find out what features and/or improvements might appear in the second beta and later for the gold master release.

    I'm not a MSDN subscriber so I cannot actually try out Vista. Sad
    Of course there is the illegal way but that is only torrent I believe and I get around 0.1 KBps transfer rate on BitTorrent, so yea.

    Another Vista video would be nice! Big Smile

    </Serious_Request>


    Regards,
    Vincent
  • RowanRowan Look, no errors.
    Yin wrote:
    Sven Groot wrote:
    Yin wrote: Hi Rowan

    Thank you for reporting IE issues. The bug you reported in  "new CSS bugs in IE7" is actually not a new issue. In IE 6, the !Doctype switch needs to appear first in the document source to take effect. Therefore the page is recognized as a compat mode document by IE6. IE7 allows !Doctype switch after the XML prologue, so your page is in strict mode if viewed using IE7. In fact, this issue also exists with IE6 if viewed as a strict mode document.

    Ah, so that's the difference between his and my example. Mine does use strict mode as it has no xml declaration.


    If it's parsed by IE7, there is no difference, because IE7 allows the !Doctype switch to be placed after !XML prologue. However IE6 treats Rowan's page as compat mode document.


    I actually remember my example affecting IE6 too, but I must have unknowingly pasted it under a different doctype and assumed it was really an IE7 only thing.

    Btw, does anybody else notice other strange behaviour when loading my demo page? For example the divs appear half way down the page when it first loads, but when you resize the browser the divs appear at the top.
  • Joshua RossJoshRoss Drinking Ovaltine since 2004
    How far are we from Acid2 working correctly?
  • Great video! Keep them coming. Are those example shown in the video avalible for download?
  • pringlespringles sup?
    what's that site they show first?  i'd live to see it for myself.
  • ZippyVZippyV Fired Up
    Charles wrote:
    
    ZippyV wrote: Very nice code you got there guys:
    - Putting an empty doctype at the beginning: <!DOCTYPE >
    - Putting an <HTML> tag in the middle of the page between the <STYLE> and the <BODY> tags.

    I'm surprised IE actually showed something.


    To which guys are you referring?
    C


    The guys who demonstrated those examples.
  • I need some help on a little layout issue I haven't been able to fix. I coded a webpage for my team handball team with a fixed layout. But on a few pages I have some layout problems with the width of the page - the right column then gets messes up. Can someone tell me what the issue is here? Firefox and Opera renders the page just as I want - IE 6 + 7 and don't. The code is (almost) standards complient. Running it through the W3 Validator I get errors on the marquee tag (yeah, oh well) and some things related to that.

    I hope somene can help me, thank you!
    Kind regards,
    Gregor
  • Sven GrootSven Groot Don't worry... I'm a doctor.
    Rowan's problem may not be a new one, but this and this sure are. Both are regressions from IE6 (and I've reported both via Connect on the Vista beta program).
  • YinYin
    Sven Groot wrote:
    Rowan's problem may not be a new one, but this and this sure are. Both are regressions from IE6 (and I've reported both via Connect on the Vista beta program).


    The second issue has been fixed. We will look into the first one. Thanks for reporting these issues.

    Yin
  • YinYin
    Pinnassog wrote:
    I need some help on a little layout issue I haven't been able to fix. I coded a webpage for my team handball team with a fixed layout. But on a few pages I have some layout problems with the width of the page - the right column then gets messes up. Can someone tell me what the issue is here? Firefox and Opera renders the page just as I want - IE 6 + 7 and don't. The code is (almost) standards complient. Running it through the W3 Validator I get errors on the marquee tag (yeah, oh well) and some things related to that.

    I hope somene can help me, thank you!
    Kind regards,
    Gregor


    Gregor,

    If you can show me the page, I will look into it to see what the issues are.

    Thanks

    Yin
  • well.. i need to express my thoughts on this one.
    i don't mean to be rude and i certainly do not want to criticize or even offend any person working on the project. but to me celebrating the (partial) css compliance of the browser is like anouncing that the new product won't be as problematic as much as the last version. now again, i 'm certainly not saying that i think IE 7 is not an important and much improved release that's going to be one of the main browsers out there. but the "hype" around getting it right is something i don't like. i always feel that 's like being happy about stuff that should work correct in the first place. that's something a user takes for granted. it's not a feature, it's the basic foundation on which stuff may be built. i wouldn't brag with saying i got something right "this time".
    i know that in a company the release schedule and time/money/personell constraints are in conflict with getting stuff right the first time. that's the way it works in reality. it's just that in theory this doesn't justify incomplete implementations or implementations that are known to be suboptimal. "we'll get there". yes, but in what version, one might ask rethorically.
    somehow the c++ team is a bit on the same path (or at least has been). Yes we screwed up a lot last time with managed extensions for c++. but look at the product now! well... it should have been that way in the first place. yes, failures happen (to put it politely). it's way better than never getting it right. just don't celebrate it like a break through.

    again, no offence to any of the people involved with the products mentioned above. i do use IE on a regular basis (and vc++ a lot), so i'm not all about microsoft bashing at all. i was just expressing my views on new features that are to me - in a way - essentially a bug fix. even if the bug is so gigantic that people got very accustomed to it and some even liked it.

    cheers,
    martin.


  • Hey Yin,

    the page is http://handball.bfc-preussen.de - content is all in German but this should not be a problem. The main page layout is fine but when you hit http://handball.bfc-preussen.de/galerie/index.php the layout goes berserk. Thanks for looking at it. (Just checked again - Opera does have more issues with the page than IE Smiley though is so close to standard)

  • mwirth wrote:
    well.. i need to express my thoughts on this one.
    i don't mean to be rude and i certainly do not want to criticize or even offend any person working on the project. but to me celebrating the (partial) css compliance of the browser is like anouncing that the new product won't be as problematic as much as the last version. now again, i 'm certainly not saying that i think IE 7 is not an important and much improved release that's going to be one of the main browsers out there. but the "hype" around getting it right is something i don't like. i always feel that 's like being happy about stuff that should work correct in the first place. that's something a user takes for granted. it's not a feature, it's the basic foundation on which stuff may be built. i wouldn't brag with saying i got something right "this time".
    i know that in a company the release schedule and time/money/personell constraints are in conflict with getting stuff right the first time. that's the way it works in reality. it's just that in theory this doesn't justify incomplete implementations or implementations that are known to be suboptimal. "we'll get there". yes, but in what version, one might ask rethorically.
    somehow the c++ team is a bit on the same path (or at least has been). Yes we screwed up a lot last time with managed extensions for c++. but look at the product now! well... it should have been that way in the first place. yes, failures happen (to put it politely). it's way better than never getting it right. just don't celebrate it like a break through.

    again, no offence to any of the people involved with the products mentioned above. i do use IE on a regular basis (and vc++ a lot), so i'm not all about microsoft bashing at all. i was just expressing my views on new features that are to me - in a way - essentially a bug fix. even if the bug is so gigantic that people got very accustomed to it and some even liked it.

    cheers,
    martin.


    Your "we screwed up a lot last time with managed extensions for c++" is not comparable to CSS support in IE, as there was no standard for managed extensions in c++ when VS.NET 2002 came out.

    And I see nothing wrong with devs taking pride in fixing something that should have been fixed by others long ago.  What, you want the devs in this video to be in tears and wearing ash-cloth because their predecessors let IE development stagnate?  And I saw no "hype" regarding this.  They clearly admitted that IE6 has been lacking (they demo'ed IE6's deficiencies) and they're showing how IE7 has addressed those problems.  I guess you'd rather not have this video at all.  Well, you might just want to skip watching any further videos, because you can be sure that the people that participate in these videos will be happy to show their work, and so will do so with enthusiasm.
  • YinYin
    Pinnassog wrote:
    

    Hey Yin,

    the page is http://handball.bfc-preussen.de/">http://handball.bfc-preussen.de - content is all in German but this should not be a problem. The main page layout is fine but when you hit http://handball.bfc-preussen.de/galerie/index.php">http://handball.bfc-preussen.de/galerie/index.php the layout goes berserk. Thanks for looking at it. (Just checked again - Opera does have more issues with the page than IE Smiley though is so close to standard)



    Please correct me if I mistaken. One issue I can see on this particular page is that the right column is shifted to the right by about 50px. Apparently this is introduced by the left and right margin of the DIV with the style “Chronic”. It seems that IE doesn’t take into account the margins of block elements between the TD and inner TABLE when calculating the available width. Since this issue has been there in IE6 as well, I suggest a workaround. Instead of setting the margins on the DIV, adding left and right padding on the outer TD. Please let me know whether this works for you.

    Yin

  • Christian Liensbergerlittleguru <3 Seattle
    Kryptos wrote:
    
    littleguru wrote: I always see this zen garden example, but it seems to be non-public. Is there a way to get the example, to do own tests with it? I mean the CSS (of the video) used to mod zen garden.


    Is this what you mean?

    http://www.csszengarden.com/



    Not exactly. They are applying a CSS template at the zen garden web site, but that template is not public. It would be cool to get the template to test it on our own.
  • I agree, having the sample code available online would make the C9 videos even better.
  • YinYin
    nojetlag wrote:
    I agree, having the sample code available online would make the C9 videos even better.


    My samples are ready for public consumption, when I figure out how to post them, I will make them available.

    Yin
  • littleguru wrote:
    Not exactly. They are applying a CSS template at the zen garden web site, but that template is not public. It would be cool to get the template to test it on our own.


    You can look at the template.  Just view the source on the page you interested in.  That will tell you what the name of the stylesheet is.

    For example on the main page you will see:
    <style type="text/css" title="currentStyle" media="screen">
      @import "/001/001.css";
     </style>

    So just type in your address bar: http://www.csszengarden.com/001/001.css

     and it will prompt you do download it.

    Hope that helps.
  • CharlesCharles Welcome Change
    Yin wrote:
    
    nojetlag wrote: I agree, having the sample code available online would make the C9 videos even better.


    My samples are ready for public consumption, when I figure out how to post them, I will make them available.

    Yin


    Post them in the Channel 9 Sandbox! Smiley
  • YinYin
    Charles wrote:
    
    Yin wrote: 
    nojetlag wrote: I agree, having the sample code available online would make the C9 videos even better.


    My samples are ready for public consumption, when I figure out how to post them, I will make them available.

    Yin


    Post them in the Channel 9 Sandbox!


    I just posted some of the demo files in the SandBox
  • YinYin
    sangamesh wrote:
    
    ZippyV wrote:
    Charles wrote:
    ZippyV wrote: Very nice code you got there guys:
    - Putting an empty doctype at the beginning: <!DOCTYPE >
    - Putting an <HTML> tag in the middle of the page between the <STYLE> and the <BODY> tags.

    I'm surprised IE actually showed something.


    To which guys are you referring?
    C


    The guys who demonstrated those examples.


    Yes, there were some typos, but Trident parser is solid enough to handle them. The samples I uploaded at the Sandbox have them corrected. thanks for pointing them out.
  • Hey Yin,

    thank you for looking into this. I am pretty busy right now (thus the slow follow up) but will try to look at in over the weekend. I think your workaround might mess up the other pages then though as adding the padding to the outer td (content) would have an effect on all pages as its the container td for the layout - but I will try.

    Kind regards,
    Gregor
  • mabster wrote:
    Are any of those demo pages available online somewhere? Particularly the "virtual earth 'lens'" one and the "eagle/shadow" one. They were awesome.

    eagle demo is on mozilla's site - http://www.mozilla.org/start/1.0/demos/eagle-sun.html Smiley
  • I say dump IE core, adopt the gecko engine (or khtml, whichever...) and develop on top of that, contributing to fixes, it's not like if that was not possible. What do you have to lose?

    The fact remains that IE7 lacks support of basic CSS2 features that we're hoping to implement, and it's the one stopping us.

    It's just an opinion. You could either support the features, or adopt an engine that already supports them. As always, Internet Explorer still sucks, apart from the UI stupidness that's been done.

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.