2

Is there any way to add to Twitter Bootstrap cross browser support to rounded corners and css gradients (read: stupid IE 7+ support)?

Cristiano Fontes
  • 4,920
  • 6
  • 43
  • 76
Daniel
  • 4,272
  • 8
  • 35
  • 48

2 Answers2

6

I'd use CSSPIE - http://css3pie.com/

It's a .htc file that will allow you to do this.

In any CSS selector where you're using border-radius (for example) you include the .htc as a behavior:

.rounded {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

NOTE: Make sure your path is relative to the root NOT the CSS file. It has to be this way for .htc files to run for some reason only Microsoft know.

SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
  • I used it a while ago and it works (mostly) I ended dropping IE 7 support, it's too high maintenance... – Cristiano Fontes Oct 16 '12 at 10:30
  • It's come in really handy for me. IE support is getting better though. – SpaceBeers Oct 16 '12 at 10:38
  • 1
    CSS Pie weighs at the minimum 40kb - that is a lot for rounded corners and some gradients – Michal Oct 16 '12 at 10:41
  • Hardly the end of the world though and a lot less hassle than images. – SpaceBeers Oct 16 '12 at 10:42
  • Yes, I liked Css3Pie it's definetly the way to go, I just don't like to add tweaks all over my code to support old IEs (there is no Css3Pie to the other cases). – Cristiano Fontes Oct 16 '12 at 10:44
  • Best option, but still looks bad. When will M$ stop trying to make their own wheel... – Daniel Oct 16 '12 at 11:21
  • @SpaceBeers Really? Rounded corners are worth 40kb? I mean, the alternative is to not give them rounded corners at all. Hardly the end of the world if the box is square instead of rounded. – cimmanon Oct 16 '12 at 12:11
  • @cimmanon - If the client wants rounded corners then it's your job to make it happen. Loading CSSPIE for older versions of IE isn't going to break anything and the loading time is barely going to be noticeable. – SpaceBeers Oct 16 '12 at 12:17
  • @SpaceBeers If the client wants flaming skulls on their website, is it also my job to make it happen? CSS PIE does have downsides: http://stackoverflow.com/questions/7658102/why-are-css3-pie-and-other-similar-scripts-not-in-use-everywhere – cimmanon Oct 16 '12 at 12:29
3

You can create your own conditional stylesheets for IE7, you will need to use images for both gradients and rounded corners.

But the best way is to convince the client (or whoever) that they should accept that their site will have no rounded corners or gradients on IE7. The designers should be aware of browser limitations and cater for that in briefs presented to the client.

Michal
  • 13,439
  • 3
  • 35
  • 33