{"id":627,"date":"2012-05-22T19:00:48","date_gmt":"2012-05-22T19:00:48","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=627"},"modified":"2012-05-22T19:01:18","modified_gmt":"2012-05-22T19:01:18","slug":"rounded-corners-internet-explorer","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/rounded-corners-internet-explorer\/","title":{"rendered":"Rounded corners in IE – the best solution"},"content":{"rendered":"

I've struggled for months, trying to find a good rounded corner solution for non-CSS3 capable browsers. There are great options out there, but none of them really seemed to meet every need and offer simplicity to boot<\/p>\n

Well, my search is over. Enter PIE<\/a>.<\/p>\n

How would you like to make many of your CSS3 rules (included border radius) work in IE 6, 7 & 8, with only one-line of CSS?<\/p>\n

behavior: url(\/src\/js\/PIE.htc);<\/code><\/p>\n

That's right, just add that little CSS rule to your style block, and you're up and running!<\/p>\n

Well, almost. There's a couple things you should know first.<\/p>\n

    \n
  1. IE doesn't even give your .htc files the time of day, unless they are of the text\/x-component <\/code>content type. This is easy in Apache:\n

    \t\t<VirtualHost...><\/code>
    \n\t\t…
    \n\t\tAddType text\/x-component .htc
    \n\t\t<\/VirtualHost><\/code>
    \n\t\t <\/li>\n

  2. It doesn't really like 'static' positioned elements, which is basically every element, unless you specify otherwise. Clearly, the position value which has the least effect layout-wise is position: relative<\/strong>.  Unless of course you have children elements which are absolute positioned.<\/li>\n<\/ol>\n

     <\/p>\n

    Once you have those two elements in place, you're off to the races. Start rounding those corners!<\/p>\n

     <\/p>\n

    #round-this-please { position: relative; border: 1px solid #a3a3a3;
    \n\t                             border-radius: 0 10px 10px 10px;
    \n\t                             behavior: url(\/src\/js\/PIE.htc); }
    \n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

    I've struggled for months, trying to find a good rounded corner solution for non-CSS3 capable browsers. There are great options out there, but none of…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[179],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/627"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":3,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":630,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/627\/revisions\/630"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}