locked
IE9 still not up to par with CSS rendering RRS feed

  • Question

  • As a developer, the single most important thing to me in a browser is that it renders CSS identically to other browsers. Right now, Chrome, FireFox, Opera, and Safari are nearly identical. Meaning, I can write CSS, open my webpage and it will look the same in all four browsers. IE 6, 7, and 8 all rendered CSS so differently that literally every single time I would ever write anything, it would look HORRIBLY broken in IE. Every, single, time. I had high hopes for IE9, but after trying it out this week on a brand new website I'm developing, it's still about as bad as the previous versions (maybe slightly better). 

    Say what you will about the Acid tests, I think they are fantastic because they are establishing standards for the way code should be rendered. IE9 still only has a 95/100, and to me, anything less than 100 is unacceptable, especially considering the links I saw to Acid3 screenshots from Microsoft while IE9 was in development. It seemed like extra emphasis was being placed on up-ing IE9 marks.

    Here are two links that I think are very important: 

    http://en.wikipedia.org/wiki/Acid3

    http://www.w3schools.com/browsers/browsers_stats.asp

    The first shows the consistently bad marks IE has been getting on Acid tests. Why is Microsoft always the lowest (even IE9)? There are even gaming console browsers that score high than IE. I understand all the complaints about Acid tests, but at this point, are there really any valid excuses for not having a 100/100? Why wouldn't you want 100/100? What could possibly be bad about a perfect Acid score?

    The second link shows the declining use of IE. Every month for the past 8 years it's been dropping steadily, now down to ~26% from ~85%. Again, I know there may be complaints about the accuracy of those numbers, but I also don't care. At all. They are accurate reflections based on the multiple websites I run both personally and for the company I work at.

    At my last job (fortune 100 company) our IT department of about 25 people agreed to stop supporting IE for our companies nationwide extranet because we were spending as much time fixing the UI for IE as we did making it in the first place. I strongly feel that this 60% drop in IE users over the last 8 years is due to the constant neglect of the BASIC needs of developers and end users. People don't care about what cool features are being added if the core functionality doesn't work. I don't have any interest in using IE9 because it STILL doesn't render CSS as Chrome, FF, Safari, and Opera does! It does't matter to me what you think I'm doing wrong, or what Microsoft's excuse is. The fact of the matter is that IE is the ONLY browser that's rendering my code differently, and this has been the case for as long as I can remember. 

    Is IE9 going to be improved, or is this something we are all going to have to put up with for several more years? It's honestly getting pathetic, and despite your opinions, the usage data backs up the fact that people aren't using IE as much as they used to. The points in this rant are the reasons why I believe people are moving away from IE, and will continue to do so until usage reaches 0%. I'm going to keep doing my part to make that happen until the simple, basic rendering issues are resolved without any excuses being made, or blame being placed on developers.



    • Edited by msnyder0 Monday, March 28, 2011 8:48 PM sp
    Monday, March 28, 2011 8:48 PM

Answers

  • This doesn't really help. If someone has IE7 and I include: "IE=EmulateIE8," or "IE=8," it will still use IE7. This tag is only useful if I want to force, say, IE9 users to render the site in IE8, or to disable IE9's compatibility mode. It would be very counter productive to force users to use an older version of a browser, and aside from testing, tags like this can cause a lot more harm than good by keeping users and developers locked in to old technology and outdated methods. The ideal solution would be for Microsoft to make a browser that functioned on par with every single other browser in existence. 
    • Marked as answer by msnyder0 Thursday, September 22, 2011 5:49 PM
    Thursday, September 22, 2011 5:49 PM

All replies

  • answered here http://blogs.msdn.com/b/ie/

     

    <q> I can write CSS, open my webpage and it will look the same in all four browsers. IE 6, 7, and 8 all rendered CSS so differently that literally every single time I would ever write anything, it would look HORRIBLY broken in IE. Every, single, time</q>

    Well, no problems here. Is it the browser or the shrink wrap... How about a link to your web sites so we can give you some constructive critisism.

    This is a PUBLIC forum. You can submit feedback to the IE MSFT team at connect.microsoft.com/ie, but you will find they have already addressed your concerns for interoperability at their Blog. I would suggest that you don't quite get it.

    Regards.


    Rob^_^
    Monday, March 28, 2011 9:43 PM
  • I understand this is a public forum, which is why I asked questions in my post. I added my criticism to emphasize the frustrating experiences this regularly causes and also the importance I place on this issue. Sorry to come off so harshly, but this isn't a sugar coated issue for me.

    My public websites are compatible with all browsers (after painstaking efforts), and the one I referenced in my previous post is not public yet, however, I should have at least provided an example in my initial post. Here is one:

    The following code renders identically in FireFox and Chrome, but IE will kick "RIGHT" down a line because I guess it thinks that's where it should go based on its preceding elements, even though they both appear on the first line...

     

    <div style="width: 300px; border: 1px Solid #333;">

        <span style="float: left;">LEFT</span>

        <span>MIDDLE</span>

        <span style="float: right;">RIGHT</span>

    </div>

    The way this needs to be coded for IE is as follows (counter intuitive):

     

    <div style="width: 300px; border: 1px Solid #333;">

        <span style="float: left;">LEFT</span>

        <span style="float: right;">RIGHT</span>

        <span>MIDDLE</span>

    </div>

     

    IECUSTOMIZER, the entire reason I made this thread was to state that IE 9 still renders CSS differently than other browsers. It has nothing at all to do with me "not quite getting it," or how I'm coding. I would suggest that Microsoft "doesn't quite get it" because after all the years of declining usage, the same old outstanding issues still exist. I'm not interested in constructive criticism because I know how to code just fine and how to fix all of the issues I encounter. The point is that IE is the only browser that causes these issues to arise in the first place, resulting in me having to go back and fix them to accommodate one odd-ball browser. It's not even a matter of who's right or wrong, it's a matter of fact, and the fact in my example is that IE, and only IE, renders my example code differently. All I would like to know is why, after all these years, does IE continue to be the only major browser to do things like this? Will it ever be on the same page as other browsers? 

    I also have no idea what you wanted me to look at on the hundreds of pages of content from the link you posted.

     

     



    Tuesday, March 29, 2011 4:28 PM
  • As a developer, the single most important thing to me in a browser is that it renders CSS identically to other browsers. Right now, Chrome, FireFox, Opera, and Safari are nearly identical. Meaning, I can write CSS, open my webpage and it will look the same in all four browsers. IE 6, 7, and 8 all rendered CSS so differently that literally every single time I would ever write anything, it would look HORRIBLY broken in IE. Every, single, time. I had high hopes for IE9, but after trying it out this week on a brand new website I'm developing, it's still about as bad as the previous versions (maybe slightly better). 

    Say what you will about the Acid tests, I think they are fantastic because they are establishing standards for the way code should be rendered. IE9 still only has a 95/100, and to me, anything less than 100 is unacceptable, especially considering the links I saw to Acid3 screenshots from Microsoft while IE9 was in development. It seemed like extra emphasis was being placed on up-ing IE9 marks.

    Here are two links that I think are very important: 

    http://en.wikipedia.org/wiki/Acid3

    http://www.w3schools.com/browsers/browsers_stats.asp

    The first shows the consistently bad marks IE has been getting on Acid tests. Why is Microsoft always the lowest (even IE9)? There are even gaming console browsers that score high than IE. I understand all the complaints about Acid tests, but at this point, are there really any valid excuses for not having a 100/100? Why wouldn't you want 100/100? What could possibly be bad about a perfect Acid score?

    The second link shows the declining use of IE. Every month for the past 8 years it's been dropping steadily, now down to ~26% from ~85%. Again, I know there may be complaints about the accuracy of those numbers, but I also don't care. At all. They are accurate reflections based on the multiple websites I run both personally and for the company I work at.

    At my last job (fortune 100 company) our IT department of about 25 people agreed to stop supporting IE for our companies nationwide extranet because we were spending as much time fixing the UI for IE as we did making it in the first place. I strongly feel that this 60% drop in IE users over the last 8 years is due to the constant neglect of the BASIC needs of developers and end users. People don't care about what cool features are being added if the core functionality doesn't work. I don't have any interest in using IE9 because it STILL doesn't render CSS as Chrome, FF, Safari, and Opera does! It does't matter to me what you think I'm doing wrong, or what Microsoft's excuse is. The fact of the matter is that IE is the ONLY browser that's rendering my code differently, and this has been the case for as long as I can remember. 

    Is IE9 going to be improved, or is this something we are all going to have to put up with for several more years? It's honestly getting pathetic, and despite your opinions, the usage data backs up the fact that people aren't using IE as much as they used to. The points in this rant are the reasons why I believe people are moving away from IE, and will continue to do so until usage reaches 0%. I'm going to keep doing my part to make that happen until the simple, basic rendering issues are resolved without any excuses being made, or blame being placed on developers.



    It's funny you say that, and mention the acid test. IE9 scored 95 as you rightly say. however, Firefox 3.6.13 scored 94, and the brand new "whizzo"  (to hear them go on about it) Firefox 4 manages 97.

    On one hand you're complaining about a browser that's made a jump from 80 to 95 in this latest version. Then you're saying another browser that scored 94 in the last one, and 97 with their new version is perfect at rendering? Please, check your figures again.

    Here's my figures on it (along with peacekeeper and sunspider, acid3 and html5 tests) http://ktetch.blogspot.com/2011/03/browser-benchmarks-firefox4-vs-ie9.html

    Wednesday, March 30, 2011 6:49 PM
  • <span> is a semantic element (used to format text, it should not be used for the wire-frame layout). Use tables or divs for layout.

    The common design practice for a multi-column layout is either table columns or floating divs, depending upon your pre-disposition on the use of tables for layout. Web search for multi-column layouts css.

    Other browser render differently to IE becuase they use UserStyle sheets. See html.css in your FX installation folder (css).

    Web search for reset.css... Eric Myer has one, the w3c has one (recommendations for browser vendors). IE has a setting for UserStylesheet... you can add the reset.css as your user stylesheet or add it to your web page (It should be the first external stylesheet read (css == casscading style sheets)) so that nomatter which browser a site visitor uses the default element style rules are the same.


    Rob^_^
    • Marked as answer by Yanping Wang Friday, April 1, 2011 9:42 AM
    • Unmarked as answer by msnyder0 Tuesday, April 5, 2011 8:15 PM
    Wednesday, March 30, 2011 8:51 PM
  • I'm not sure if you completely missed, or just ignored the point I was trying to make with my example, and I apologize if I wasn't clear. I was strictly demonstrating how IE renders the code differently - who cares if I used spans? I wasn't submitting the code for critique.

    One of the main reasons my example is important is because out of the box .net controls like the RadioButtonList will be rendered differently in IE because I guess IE is doing something with the margin space? Go ahead, drop a RadioButtonList on a blank page and try it out. Right off the bat, developers have to spend time accommodating IE because it's the only browser that renders it differently. Is IE "correct?" I don't know or care. What I do know is that it's the only browser that's different, and since it has a 95/100 acid score and Chrome has a 100/100, I'll have to trust that Chrome rendering it in the most acceptable way.

    To sum this up, and to address K'Tetch's response, what most commonly happens with me is that I style a portion of a site, then look at it in all 3 browsers. 9/10 times, IE is the only one that looks different. IE9 has an improved Acid rating, but even though it's beating out FireFox, FireFox still seems to be far more similar to Chromes rendering with the experience I've had. Given that Chrome has a 100 rating and web pages viewed in FireFox are usually identical to it, it leads me to believe whatever caused IE to lose 5 points (95/100) is possibly because of a much more noticeable and commonly occurring issue than what FireFox lost it's 6 points (94/100) for. 

    I will look more into what you're saying about the userstylesheet setting, but I think thats a very backwards approach to the issues I'm expressing. I don't feel I should have to take extra steps to fix IE rendering differences, and the reset.css is in many ways just as bad as handling each rendering difference manually. 

    Tuesday, April 5, 2011 8:50 PM
  • Hi,

    Sure.. there are many different ways to skin a cat and all browsers have their differences in the way they interpret the w3c 'recommendations'. Each Browser vendor has their interpretation of a standard. connect.microsoft.com/ie is the place to submit a feature request or issue report.

    However, if there are workarounds or the issue you report is not widely encountered, there is little incentive for MS to make changes. This is a public forum and we don't work for MS, so I cannot say if your request has merit... I am just saying that it is not usually encountered (using floating spans) very much in the wild (if you know of a high traffic website that uses floating spans, include it with your connect ticket) and there are existing workarounds.. (use a block layout elements for float affects).

    @msnyder - please see the IEBlog for response from the IE Team about comparing browsers on the ACID tests.

    http://blogs.msdn.com/b/ie/archive/2011/04/01/a-more-compatible-ie9-through-your-feedback.aspx


    Rob^_^
    Tuesday, April 5, 2011 10:14 PM
  • Hey there. I do work for Microsoft, however not on the IE team. I build web sites all the time as a hobby and had never really came across this problem until recently. The solution is simple actually.

    We have added a new Meta Tag that you can use to direct IE to make the information presented compatible up to a certain level browser. The tag looks like so..

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

    Now the important thing to note here is that this directive basically states that the browser will render the content as if it is working like a certain version. So if IE 8 works fine with your browser, you can make IE emulate IE8 when it renders.

    Find out more about this meta directive here

    http://msdn.microsoft.com/en-us/library/ms533876(VS.85).aspx

    And please mark this as the answer if it does work for you.


    Osie BRown
    • Proposed as answer by Osie Tuesday, July 12, 2011 1:12 AM
    Tuesday, July 12, 2011 1:11 AM
  • This doesn't really help. If someone has IE7 and I include: "IE=EmulateIE8," or "IE=8," it will still use IE7. This tag is only useful if I want to force, say, IE9 users to render the site in IE8, or to disable IE9's compatibility mode. It would be very counter productive to force users to use an older version of a browser, and aside from testing, tags like this can cause a lot more harm than good by keeping users and developers locked in to old technology and outdated methods. The ideal solution would be for Microsoft to make a browser that functioned on par with every single other browser in existence. 
    • Marked as answer by msnyder0 Thursday, September 22, 2011 5:49 PM
    Thursday, September 22, 2011 5:49 PM
  • I applaud you sir. I can't stand it anymore. No matter what you do IE DOES NOT SUPPORT CSS STANDARDS. Period. I don't care what anyone who works for MS says, I know it's garbage. I make a standards compliant web site and it looks identical and normal in Chrome, FF, Safari, etc. But open that same page in IE8 or IE9 and it's a complete mess. Doctypes make 0 difference at all. I don't care what anyone says, I have never once seen doctype change the way one of my pages is rendered in IE. No matter what I chose, they are just rendered wrong. As a web developer, MS has made my professional life a miserable living hell. 95% of my time is spent trying to make perfectly fine CSS compliant sites look normal in IE with all kinds of hacks and tweaks and ugly code. I really wish MS would just give up, because clearly they have NO idea how to make a browser.
    Thursday, March 8, 2012 7:45 PM