NiftyCube Corners and IE7

I recently started on a project that called for rounded corners. Some areas where supposed to be “fluid” which present a problem with my usual rounded corners method. However I’ve used NiftyCube Corners in the past so I was able to find an easy solution.

CSS Background Colors and IE7

I spent a lot of time trying to figure out why none of my rounded corners were showing up in IE7 but they worked fine in FireFox and Safari. I finally stumbled upon the fact that IE7 cares about how you define your background colors while the others do not.

My CSS looked something like this:

1
2
3
4
5
6

  div#box{
    background: white;
    margin: 0 auto;
    width: 30em;
    padding: 1em;
  }

This did not work, and it’s because I specified the background color using a word and not the hex code. I changed it to #FFF and all is well. So make sure to check this if you’re NiftyCube Corners aren’t working in IE.

Final CSS:

1
2
3
4
5
6

  div#box{
   background: #FFF; /** <----- CHANGED **/
    margin: 0 auto;
    width: 30em;
    padding: 1em;
  }