An IE9 review with a massive error

Warning This article was written over six months ago, and may contain outdated information.

I downloaded the IE9 Beta last night, and while I haven’t had the chance to give it a proper once-over yet, I’m pretty impressed with its capabilities so far. The real star is the hardware acceleration, which opens pages so fast it seems like magic. The new HTML5 and CSS3 support is very welcome.

You can read an in-depth review of it at ZDNet, except it seems to be written by someone who doesn’t really understand CSS very well.

In page five of the review he provides comparisons of the code required to get a rounded corners effect on an element, claiming that this is what’s needed for it to work in Chrome:

border-bottom-left-radius: 152px 152px;
border-bottom-right-radius: 228px 228px;
border-bottom-style: solid;
border-bottom-width: 42px;
border-left-style: solid;
border-left-width: 42px;
border-right-style: solid;
border-right-width: 42px;
border-top-left-radius: 152px 152px;
border-top-right-radius: 304px 304px;
border-top-style: solid;
border-top-width: 42px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;

This is – not to put too fine a point on it – crap. Chrome will accept the shorthand properties in exactly the same way as IE9, Safari, Opera and Firefox.

Speaking of that latter browser, he also states that the -moz- prefix is required for border-radius:

-moz-border-radius: 152px 304px 228px 152px;

But as we’re dealing with Beta releases, then he should also make clear that in the latest Firefox Beta the prefix is no longer needed.

When the Betas become release versions, we’ll be able to use the same code cross-browser:

border: 42px solid orange;
border-radius: 152px 304px 228px 152px;
padding: 12px;

There’s nothing wrong with not knowing CSS, but if you don’t know it then maybe you shouldn’t make a point of using it in an example.

9 comments on
“An IE9 review with a massive error”

  1. Sometimes stuff like that makes me wonder what the writers motive really was. I mean how many people are now going to think Chrome is junk or behind the times? Not cool.

  2. Got me muh IE 9 Beta ands uh tryin ta use me some border-radius’s and shez not uh workin paa. WTF

    Seriously, tho, might be missing something. Added border-radius: 5px to my CSS, applied that to both a div tag and asp.net button style and neither is rounding… Can anyone else test this and let me know if its working for them in the IE 9 Beta?

  3. @Coderbond – I don’t have access to IE9 right now, but I’ll take a look at it later.

  4. @Coderbond – I did a test in IE9 and border-radius seems to be working with no problems. Perhaps you could show me the code you used which caused the error?

  5. .CommandButton
    {
    background-color: #E0E0E0;
    border-color: Maroon;
    border-style: double;
    font-family:Calibri;
    font-size:small;
    font-weight:bold;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    I know my page is linked to the CSS sheet correctly, because it the buttons take on the color and font. Just no rounded corners.

    I’ve tried border-radius: 5px; and the method in the above example.

  6. The only problem I can see in your code is that there are a couple of incorrect characters, at the start of the -moz- and -webkit- properties – they are dashes instead of hyphens. When I corrected that, your code worked. Also, you can use only one value for border-radius, like the others, and it should come after the prefixed properties; so your code should be:

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  7. Thanks for the help, I’ve been digging and I think the problem has to do more with directory structure and controls.

    When I pull up a page at the root of my web app, the border-radius is “AS expected”. When I pull a page thats deeper in the directory structure, it is not. Hence the reason I thought it wasn’t working.

    .\Site.Css
    .\Schedule\Schedule.aspx
    .\Schedule\Search_Normal.ascx
    .\Schedule\Search_Advanced.ascx

    The Schedule.aspx contains the css import syntax

  8. Ya, it’s nice that it supports html5 and css3. Unfortunately, Microsoft’s inability to provide backwards compatibility and a smarter way of providing the most recent version of ie to its users has forced the rest of the world to support ie versions written over a decade ago. so don’t expect the internet to change very quickly.

    When will Microsoft realize that they are actually hindering technology more than helping it to advance.

  9. Microsoft made a big mistake with IE7, in my opinion; it wasn’t nearly as good a browser as it could have been. IE8 is the browser IE7 should have been.

    I think that they’re on the right path now, however, and to their credit they are fully aware of the need to get people off of IE6 as fast as possible.

    I’m actually not quite so concerned about people having a browser that supports HTML5 & CSS3 as I am about them having a browser which is at least fully compliant with CSS2.1, so if everyone using IE moves on to at least IE8 I’ll be really happy.