7 ms·

PIE: Add CSS3 border-radius and multiple backgrounds to IE 6-8

27 points by compay 16y ago

wdewind 16y ago
http://css3pie.com/demos/tabs/# http://css3pie.com/demos/tabs/# the tabs don't seem to work in any browser. i only tried ie8 for the styles, and while they are impressive they definitely lack polish. for instance, when enabled a border-bottom is added to each tab that shouldn't be there. this is a tough problem and css pie could potentially be useful but i think it needs a) polish b) a bit more customizability before it's production ready. good start though.
- lojjic 16y ago
  Thanks for the feedback! This demo isn't intended to be functional (clicking the tabs won't do anything, that requires JavaScript code which is out of scope for this demo), it's just there to show an example of how you could style things using CSS3. I can verify there is a bug in IE8 where there is an extra gray line at the bottom of the active tab. I will attempt to fix that ASAP. It works properly in IE6 and IE7. Thanks again.
  - pygy_ 16y ago
    In IE6, here, there's a big gap (~1em) between the tabs and the content. I'm on a public computer though, with an old IE6 version (6.0.2900.2180, XP SP2) infected by the Babylon toolbar.
    - lojjic 16y ago
      Hmm, interesting, I wasn't seeing that a minute ago. My bad. I'll try to fix both bugs tonight. Thanks for the feedback!
smitjel 16y ago
A question though...why? If people don't care to update IE, do you think they care about rounded boxes, shadows and gradients? IE9 is supposed to support all this, I think. Let the people that don't want to update live in their "square" world...it doesn't seem like they care anyway.
- powrtoch 16y ago
  Unless I'm mistaken, this is targeted at webmasters who want to use these features in their websites. I haven't downloaded/installed, but my guess is that it provides a workaround component that your page can link to. Similar to the existing javascript workarounds for transparent PNGs. The point is to improve the experience of IE6-8 users on your site, not for you to enhance your own IE installation. But correct me if I'm wrong, like I said I'm just assuming.
  - smitjel 16y ago
    Yes, it's javascript overhead you have to add to your site so that people using IE will be able to see CSS3-like effects. So why add the overhead just so users of IE can have rounded boxes and gradients. Why bother? It's just eye candy...
    - compay 16y ago
      On many sites, IE 6-8 users account for more than half of visits, and are often the single largest block of visitors by browser. Assuming you have such a site and don't want to just write off 50% of your users design-wise, it's nice to have the ability to use border-radius and other CSS3 advances, because they save you from a lot of time-consuming, repetitive work. If you are in a situation where you can simply forget about what your site looks like in IE, then I envy you. Most web designers are not.
      - smitjel 16y ago
        No, that strictly depends on how you've designed your site. To have your site look the best in ALL browsers, make subtle use of CSS3 effects. Don't _rely_ on them. If you follow that, you won't be writing off "50%" of your users design-wise.
        compay 16y ago
        Sure, but then you're writing off CSS3 and continuing to write code as if it were 2006, which I personally don't like having to do.
afhof 16y ago
I tried running this on my XP64 machine with IE8, and the CPU went up to 100% for a couple seconds upon loading the page. It lagged more when changing the settings and became unresponsive. Does this happen for anyone else?
gfodor 16y ago
This is great! I knew my laziness would pay off and someone would eventually fix the problem without having to image-ify all the CSS rounded corners in my new app :) Thanks.
skyjumper 16y ago
This is a (my) similar project: http://fetchak.com/ie-css3/ http://fetchak.com/ie-css3/ A 2.0 rewrite is almost ready, will support different border-radius sizes per corner and any color of box-shadow. The gradient thing is nice. Beat me to it. :)

27 points by compay 16y ago

http://css3pie.com/demos/tabs/# http://css3pie.com/demos/tabs/# the tabs don't seem to work in any browser. i only tried ie8 for the styles, and while they are impressive they definitely lack polish. for instance, when enabled a border-bottom is added to each tab that shouldn't be there. this is a tough problem and css pie could potentially be useful but i think it needs a) polish b) a bit more customizability before it's production ready. good start though.

lojjic 16y ago
Thanks for the feedback! This demo isn't intended to be functional (clicking the tabs won't do anything, that requires JavaScript code which is out of scope for this demo), it's just there to show an example of how you could style things using CSS3. I can verify there is a bug in IE8 where there is an extra gray line at the bottom of the active tab. I will attempt to fix that ASAP. It works properly in IE6 and IE7. Thanks again.
- pygy_ 16y ago
  In IE6, here, there's a big gap (~1em) between the tabs and the content. I'm on a public computer though, with an old IE6 version (6.0.2900.2180, XP SP2) infected by the Babylon toolbar.
  - lojjic 16y ago
    Hmm, interesting, I wasn't seeing that a minute ago. My bad. I'll try to fix both bugs tonight. Thanks for the feedback!

smitjel 16y ago

A question though...why? If people don't care to update IE, do you think they care about rounded boxes, shadows and gradients? IE9 is supposed to support all this, I think. Let the people that don't want to update live in their "square" world...it doesn't seem like they care anyway.

powrtoch 16y ago
Unless I'm mistaken, this is targeted at webmasters who want to use these features in their websites. I haven't downloaded/installed, but my guess is that it provides a workaround component that your page can link to. Similar to the existing javascript workarounds for transparent PNGs. The point is to improve the experience of IE6-8 users on your site, not for you to enhance your own IE installation. But correct me if I'm wrong, like I said I'm just assuming.
- smitjel 16y ago
  Yes, it's javascript overhead you have to add to your site so that people using IE will be able to see CSS3-like effects. So why add the overhead just so users of IE can have rounded boxes and gradients. Why bother? It's just eye candy...
  - compay 16y ago
    On many sites, IE 6-8 users account for more than half of visits, and are often the single largest block of visitors by browser. Assuming you have such a site and don't want to just write off 50% of your users design-wise, it's nice to have the ability to use border-radius and other CSS3 advances, because they save you from a lot of time-consuming, repetitive work. If you are in a situation where you can simply forget about what your site looks like in IE, then I envy you. Most web designers are not.
    - smitjel 16y ago
      No, that strictly depends on how you've designed your site. To have your site look the best in ALL browsers, make subtle use of CSS3 effects. Don't _rely_ on them. If you follow that, you won't be writing off "50%" of your users design-wise.
      - compay 16y ago
        Sure, but then you're writing off CSS3 and continuing to write code as if it were 2006, which I personally don't like having to do.

afhof 16y ago

I tried running this on my XP64 machine with IE8, and the CPU went up to 100% for a couple seconds upon loading the page. It lagged more when changing the settings and became unresponsive. Does this happen for anyone else?

gfodor 16y ago

This is great! I knew my laziness would pay off and someone would eventually fix the problem without having to image-ify all the CSS rounded corners in my new app :) Thanks.

skyjumper 16y ago

This is a (my) similar project: http://fetchak.com/ie-css3/ http://fetchak.com/ie-css3/ A 2.0 rewrite is almost ready, will support different border-radius sizes per corner and any color of box-shadow. The gradient thing is nice. Beat me to it. :)