IE7: CSS Support?
- Posted: May 03, 2006 at 5:36 PM
- 72,501 Views
- 42 Comments
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.
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.
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.
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
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.
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.
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
Is this what you mean?
http://www.csszengarden.com/
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
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.
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!
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
- 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.
Ah, so that's the difference between his and my example. Mine does use strict mode as it has no xml declaration.
Your 'shall we' should have a question mark.
[6]
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).
To which guys are you referring?
C
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.
<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.
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!
</Serious_Request>
Regards,
Vincent
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.
The guys who demonstrated those examples.
I hope somene can help me, thank you!
Kind regards,
Gregor
The second issue has been fixed. We will look into the first one. Thanks for reporting these issues.
Yin
Gregor,
If you can show me the page, I will look into it to see what the issues are.
Thanks
Yin
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
though is so close
to standard)
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.
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
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.
My samples are ready for public consumption, when I figure out how to post them, I will make them available.
Yin
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.
Post them in the Channel 9 Sandbox!
I just posted some of the demo files in the SandBox
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.
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
eagle demo is on mozilla's site - http://www.mozilla.org/start/1.0/demos/eagle-sun.html
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