Making Sites Look Their Best in Standards Mode
IE has traditionally drawn a 2-pixel border around the content area of a site. This border, drawn as part of the page rather than IE’s frame, affects calculations of distance from the top and left of the page. It also creates a not-so-modern beveled look.
In the fourth Platform Preview, you’ll notice pages running in IE9’s Standards Mode no longer have the border. Here’s a before and after:
Before
After
Pages that run in legacy document modes will still have a 2-pixel border so that any site calculations dependent on the 2 pixels remain the same as in IE8.
To make sure your site runs in IE9 Standards Mode and gets this and all the other latest features in IE9, use a strict doctype. We recommend the HTML5 doctype (<!DOCTYPE html>) since it’s simple and will put your site in Standards Mode in all current browsers.
John Hrvatin
Program Manager
Comments
Anonymous
August 23, 2010
Just a reminder: innerHTML is still broken in IE9 platform preview 4.Anonymous
August 23, 2010
Small things really do add up. It's nice to see IE is still supporting legacy doc mode for those who aren't transitioned, yet. I'm pepped for the final release! : )Anonymous
August 23, 2010
Even I can't believe how ridiculous this one is. I always considered the sunken effect an innocuous bit of ugliness. It broke positioning?!?!Anonymous
August 23, 2010
That's very nice to hear. I always wondered about the questionable UI decisions in IE, like this adding an arbitrary border to every page, or the click sound, or "refreshing" the address bar after the page is loaded even if I'm in the middle of editing the text there.Anonymous
August 23, 2010
That is the biggest admittance to failure I've ever seen from browser developers. But thank goodness you've noticed.Anonymous
August 23, 2010
Greg, please either troll elsewhere or find a clue and troll something more interesting. Michal, you too, unless you really haven't upgraded from IE6 yet and are still having problems with your address bar. And since you're clearly new to using Windows, you should check out the SOUNDS applet in the control panel. Windows is neat because you can customize things like sounds. As for 3d-edges, they're hardly arbitrary-- they're legacy. Windows 95 introduced them, and they've been present ever since. The IE team showed how to turn them off years ago if you want to, but I guess you're not used to the idea that you can configure your software as you like it. Software is neat like that.Anonymous
August 23, 2010
@ still not InnerHTML is still working as designed by their inventors - Microsoft! If you compare it with the implementations of other browser makers, you'll find that these other implementations are buggy, because they dont mirror image the behaviour set by its designers. Go complain to them! HarryAnonymous
August 23, 2010
I have also had serieus issue with UI designs and especially the interaction between UI elements and renderer. I am always annoyed that many extremelly slow page-load actions in IE lock down the adress bar or make the stop button not function properly.Anonymous
August 23, 2010
This isn't just a design thing, but also a major usability improvement! One of the little annoyances of IE for me has been the inability to scroll the page using the scroll wheel when the cursor is located on that 2-pixel border. I usually have my browser maximized, move my mouse out of the way (edge of the screen) and scroll to view the rest of the page. Except in IE, where that pesky little border takes away the focus from the page. Glad to see that's taken care of :)Anonymous
August 23, 2010
Harry Richter, I, who blame Microsoft for the web's 10 lost years, recognize great things that came from Microsoft. XMLHttpRequest, DHTML, innerHTML, ActiveX and much more [just kidding on activex ;-) ]. HOWEVER, Microsoft as well as any other vendor, should not let ego get in the way of adopting standards of the web. If a standards body has published a standard that's different then even its inventor, go ahead and implement it. I have said it before: had Microsoft swallowed their pride and implemented SVG over the (arguably) better engineered VML in 2001 the web would be much better NOW! Standards >> pride meni, open-{standards,source} fanboi UNIX and the UNIX spirit fan since 1986Anonymous
August 23, 2010
The comment has been removedAnonymous
August 23, 2010
msdn.microsoft.com/.../ms533897(VS.85).aspxAnonymous
August 24, 2010
@John Hrvatin: Ever since people started to be annoyed by this border around the viewport, a very similar issue has been reported as well. If an iframe has a CSS border applied, this vieport border is still drawn around the iframe. Opera, Safari and Firefox also draw such a border around iframes. However, if in these browsers a CSS border is applied to the iframe element, the initial border is replaced by the CSS border. This should work the same in Internet Explorer. Please see the currently active (but not yet reproduced) Issue #577604 (borders on <iframe> cannot be styled via CSS). In the report, its noted that the Issue had been previously reported while IE8 was in the making. Also see this testcase I created: the-dees.webs.com/.../171-iframe-vp-border.html @Omar: I don't think innerHTML will be completely fixed in IE9. innerHTML is a property that's closely related to the HTML parser. And IE9's HTML parser is still the same as IE6's one (except a few improvements). When the developers implement the HTML5 parsing algorithm (like Gecko and WebKit did), bugs like this should be fixed (hopefully in IEnext). FWIW, HTMLOptionElement, HTMLOptGroupElement are definately missing. And what do you mean by "Getter were broken on al HTMLElements"? If there are specific issues, please name them, so someone can test and report them (a testcase would be ideal - a working, publically available testcase, not a link to some complaint website, thanks).Anonymous
August 24, 2010
@John Hrvatin: I forgot one question: Is it really necessary to keep this border for quirks and IE<9 modes? I could imagine this will cause some quirky view when a user switches from a website in standards mode to a website in quirks mode and vice versa. Also, are there really methods/properties that are affected by this border (if yes, which)? Do they report the same or different values when this border is drawn? Because when a user resizes the browser window, the calculations that may have taken this border into account will go wrong anyway. So I think completely removing this border would probably best for user experience.Anonymous
August 24, 2010
@Omar, All of microsoft's technology has been open in the sense that it has always been well documented and anyone is free, and encouraged to implement them. Additionally, your web "standards" rhetoric suggest a lack of understanding of the evolution and the role of html. HTML began as an markup language that was designed to be extensible. Indeed, it's success began in 1993 when the decidedly "non standard" addition of in-page images by the Mosaic team gave it the edge over the competing. The web quickly evolved beyond the bare extensible framework with embedded media and other features that that would come to define the online experience. Netscape was just as prolific a unilateral feature creator as microsoft ever was. The first streaming video arose such as realplayer and java plugins allowed. There was no real authorative standard making body until well after netscape had begun to sputter out, at which point apple, mozilla and oper formed WHATWG in 2004 to supercede to some extent the W3C (which had approved of many of the decisions being made by microsoft like XML) and to establish some of the first standards that would begin heading in a different direction of the W3C. The IE teams motto of "same markup" instead of mentioning standards is a reflection of the thought that standards are important only for interoperability, and that they shouldn't be used to stifle new or different ideas.Anonymous
August 24, 2010
This looks interesting: https://wiki.mozilla.org/HTML5Anonymous
August 24, 2010
And for HTML5 video: www.reelseo.com/encoding-video-web-videoAnonymous
August 24, 2010
And some information for HTML5 Forms: diveintohtml5.org/forms.html http://diveintohtml5.org site is really great if want learn more about the future of webAnonymous
August 24, 2010
And more HTML5 examples: diveintohtml5.org/examplesAnonymous
August 24, 2010
I don't understand why Microsoft and IE wait year and want every time to make a new browser, WHY don't make constant updates! With fix, patch, new feature, etc.... this is the only way to keep the people to use IE. Keep updating it please.Anonymous
August 24, 2010
I just noticed that the UI in Outlook Web Access does NOT have this border (in IE7 and IE8) so that means there must be some way to disable this border in older versions of IE as well. As far as I can tell it's not a CSS property that can be altered, does anyone know how this is done? See comparison of Outlook WA and this page: http://yfrog.com/mq82120657pAnonymous
August 24, 2010
Hurray! No more regedit edits to remove the border.Anonymous
August 24, 2010
The comment has been removedAnonymous
August 24, 2010
@Sandro Not everybody wants their browser constantly updated. There are thousands of enterprises that use IE that would throw a fit if IE was updated every few months.Anonymous
August 24, 2010
@Joe 100% agree. Companies rely on IE, Microsoft can't just update it and break the web inside companies. We all rely on companies to provide us with services, if Microsoft would break the apps inside the companies we would all lose productivity.Anonymous
August 24, 2010
There has to be a better way to update the browser without breaking companies apps. Maybe a customized IE browser for Enterprises?Anonymous
August 24, 2010
The comment has been removedAnonymous
August 24, 2010
@the_dees getBoundingClientRect is one example, as are other event properties like clientX and clientY. This is called out on MSDN (msdn.microsoft.com/.../ms536433(VS.85).aspx) and other blogs (hartshorne.ca/.../javascript_events). Nevetheless, we had a similar conversation about whether to make this change in all modes because it would be an edge case for a site to break because of this. However, we do everything we can to keep the legacy modes the same as previous versions or else developers can't count on them. We've learned that anytime we ask "does anyone really depend on this?" the answer is "yes", and anytime we ask "how many sites depend on this?" the answer is "more than you'd think". :) Thanks for the bug report on the other border issue! @Mo In Quirks Mode, you can style this border with CSS applied to the <body>. amazon.com, which runs in Quirks Mode, does this. John [MSFT]Anonymous
August 24, 2010
The comment has been removedAnonymous
August 24, 2010
wow, got so used to the border but I welcome the change.Anonymous
August 24, 2010
When will MS learn not to tie IE to OS technologies? If a particular Windows version offers feature x, use it. If it does not, don't make the other leading and dominant OS users, that is, XP users suffer by not supporting IE on that at all. Your "same markup everywhere" holds no truth as "same markup" is only being offered to Windows 7 users (and Vista but that Vista support for consumer editions will end in 2012). IE9 should really have been the last version to support XP and deliver finally on the competitive standards support which sadly IE8 doesn't have. I will make it a point not to use IE9 even on Windows 7 but use the upcoming Firefox 4.0 which also uses Direct2D and DirectWrite hardware acceleration but doesn't punish XP users.Anonymous
August 24, 2010
meni: "Having a clue" ain't really your strong suit, is it? Is the reason you post here that the other open-source fanboys have shunned you? Relevant: Yeah, as the most successful software company in the world, I'm sure Microsoft has learned their lesson. I'm sure that they'll miss you among their hundreds of milliions of users. They'll probably have executive meetings about how they can win you back!Anonymous
August 25, 2010
Very nice!Anonymous
August 25, 2010
PLese please please fix the scrollbar Fitts law problem - remove the 2 pixels that prevent you from scrolling by moving the mouse to the edge of the screenAnonymous
August 25, 2010
@Tsoh Have you tried the IE9 preview? They have removed the 2 pixels you are talking about.Anonymous
August 25, 2010
@the_dees - the issue with the getter for innerHTML is that it does not return what you set. e.g. If I pass in: <div id="test"><input type="text" name="email" value="user@example.com" maxlength="256"/></div> and I ask for document.getElementById('test').innerHTML I get this: <INPUT type=text name=email value=user@example.com maxLength=265> which is NOT what I originally specified at all. Since this mess is returned for every element there is no way to use the getter with expect-able results.... thus the getter is essentially useless in IE... thus useless cross-browser. A classic case of IE broke the Web. I'll admit though that using jQuery here is much easier as it ignores the garbage IE uses and gives back usable content. Its just sad that we need to rely on 3rd party libraries to fix IE rather than expect MSFT to step forward and fix their code.Anonymous
August 25, 2010
nice step. can't wait to see IE's new UI :)Anonymous
August 25, 2010
omg..just found this: www.zdnet.com/.../7213 i.zdnet.com/.../ie9-ui.png cool. i wish the "tab bar" can be placed at the very top (like chrome) or under the address bar or left/right/bottom edge of the screen...as the user desires :DAnonymous
August 25, 2010
The leaked IE9 UI looks very cool. But please make the placement of the tab-bar customizable.Anonymous
August 25, 2010
You guys fail.Anonymous
August 25, 2010
And you trolls troll.Anonymous
August 25, 2010
The leaked UI does indeed look good! The titlebar should not be used for UI elements (like in the screenshot) and it's really nice that no text is displayed in the titlebar. It gives the browser a really clean look and feel.Anonymous
August 25, 2010
The leaked UI looks really good! I'm glad to see that you guys don't use the titlebar for UI elements like other browsers do. The titlebar is an important part of the UI and also for usability (dragging windows around). It's also very refreshing to not display any text in the titlebar, it gives IE a very clean look and feel.Anonymous
August 25, 2010
The comment has been removedAnonymous
August 25, 2010
The comment has been removedAnonymous
August 25, 2010
The comment has been removedAnonymous
August 25, 2010
@Stu Yes, the scrollbar scroller in IE9 platform preview is 1 pixel away from the edge.Anonymous
August 25, 2010
Just my two cents while I'm here too and appologies for being off-topic but things I'd like to still see in future IEs: 1 Download manager - current dialogs are fine but why not use the sidebar (currently used for Favourites, Feeds and History and add a Downloads tab). Retain the option to use separate windows. 2 Direct downloads - i.e. stop downloading to a file first in the IE Cache (Temporary Internet Files folder) and just save it directly to the location. Or, save it in the cache then do a move operation instead of copy. Saves time and the requirement of having to have twice the available disk space of the size of file you download! 3 InPrivate Filtering - improve it by allowing entires to be manually added (ala Restricted Sites zone) and make it possible to block entire domains, not just elements via filename of specifics in a URL. 4 Options dialog - needs reorganising. I'm sure some options could be removed, mostly in the Advanced tab. I mean, "Empty Temporary Internet Files folder when the browser is closed" is an option here: but then doing this is also possible by setting "Delete browsing history on exit" on the General tab and choosing "Temporary Internet Files" on the Delete Browsing History dialog. Never been sure if either method does the task any differently. 5 Font - make a full-Unicode font the default for websites that don't specify one. So many Wikipedia pages I've viewed in IE and seen squares instead of characters. At-least maybe introduce a "Unicode font:" option as well as Rich and Plain text. 6 Discussion Bar ("Discuss") - can this feature be removed? Does anyone know if this still does anything? (View > Explorer Bars > Discuss). Wasn't it was derived from a Microsoft Research project called Community Bar? And I don't think that can be installed after IE6. 7 Favourites - perhaps a bug and not specifically for the IE team but I have encountered the issue where a Favourite file in IE loses the ability to work -- notable sympton of such a case being if you call up the properties dialog for an affected Favourite file it won't have the "Web Document" tab. Apparently it's related to Windows Search holding the file open and causing corruption. Perhaps best to not include the Favourites in the Index by default, if so?Anonymous
August 25, 2010
@Stu: #5> This is often caused by a site failing to specify its text encoding properly, and hence the characters are actually interpreted incorrectly. A proper CHARSET declaration will resolve this. #6> This is a Microsoft Office 2003-installed Explorer Bar plugin. It's harmless unless you happen to show it, but you can uninstall it or disable it if you like. It's used when you have a server with the Office Server Extensions installed, and allows you to collaboratively markup a document. It was neat back in the day but has mostly been replaced by other features.Anonymous
August 25, 2010
PLEASE make the scrollbar flush with the edge of the screen - every other browser gets this right!!!!Anonymous
August 25, 2010
@ meni We agree on not agreeing on many points. One thing should be corrected though, for you, and for the one you took the quotation from: "Carthago delenda est" is plain wrong! I know it is used in this way by the unknowledable, but the correct quotation of Cato is "ceterum censeo carthaginem esse delendam", which is reported by Plutarch, abeit in ancient Greek: " Δοκεῖ δέ μοι καὶ Καρχηδόνα μὴ εἶναι" (but it seems to me, that also Karthago should not be). Cheers HarryAnonymous
August 25, 2010
@EricLaw [MSFT] For the automatic-select of a font to work does the option View > Encoding > Auto-Select have to be on? It's off by default, if so, so this may need changing.
Couple more points to add to my others above: Tabs - in IE7 it used to be possible to allow new tabs to open next to the current one (image you have three sites currently all in tabs in one window: 1, [2], 3. You have two selected. The next link you middle-click on opens to the right of 2, so you get: 1, 2, [4], 3). In IE8 new tabs always appear only at the far end on the right. Irritating when more tabs than fit the window are open as you have to scroll to the right and lose your place -- or set the Ctrl-Tab switching to "use most recent order" under Advanced options. Cache Name - one I can't see changing but still: shouldn't that "Content.IE5" cache folder name finally be updated? ;) As IE9 is only for Vista and 7 and I believe both of these support NTFS Junctions why not have "Content.IE9" and create a junction called "Content.IE5" to it for legacy applications? Always find it amusing using IE8 but having a folder referring to IE5! :p
Anonymous
August 25, 2010
Any news from "Blurry - Bleeded fonts" problem as mentioned blogs.msdn.com/.../benefits-of-gpu-powered-html5.aspx <- Seems Preview 4 even does not address this...Anonymous
August 25, 2010
Sorry for double-post. It seems problem is with Direct2D since Firefox 4 beta 4 is also having the very same problem that use that feature. Hope Windows team working on that...Anonymous
August 25, 2010
BTW, because of that border, main Javascript frameworks having problems with offsets... Such as if you try to place a div on parent divs border, you get 2 pixels wrong...Anonymous
August 25, 2010
I for one am happy that Internet Explorer 8 (as far as I've tested) supports these CSS elements when FireFox 3.6.8, Opera 10.61, Safari 5, and Chrome Canary Build 7.0, don't. List-Style-Type: None, UL{Margin: whatever), and Display:Inline; Keep up the good work IE team! Hope to see IE9 soon. PS. Its been how long since IE8 came out, and its competition still can't process better looking fonts then IE8. (Direct X in IE, ROCKS)Anonymous
August 26, 2010
The comment has been removedAnonymous
August 26, 2010
"Wendy"-- it's really not polite to insult other posters and retort with claims that lack evidence. <<IE9 prev. 4 still fail >> What are the bug #s on CONNECT so that others can validate your claims? <<ClearType in IE was a failure.>> ClearType in IE is a success. See, anyone can play!Anonymous
August 26, 2010
@wendy You can find several examples of the css that IE8 supports and others don't in the 7000+ test submitted by MS to W3C during IE8 development.Anonymous
August 26, 2010
The comment has been removedAnonymous
August 26, 2010
The comment has been removedAnonymous
August 27, 2010
duh