Posts: 427
Threads: 107
Joined: Jul 2010
Reputation:
0
2011-05-28, 03:35 PM
(This post was last modified: 2011-05-28, 03:59 PM by xomp.)
Wondering if there is anyway I can have Internet Explorer render CSS gradients correctly (or at least how Firefox renders them).
The code I'm using to give it the gradient is:
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background:rgba(239,91,10,.75);
background:-moz-repeating-linear-gradient(top left -45deg, #1F2225, #1F2225 5px, #303030 5px, #303030 10px);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(243,52,8,.75)),to(rgba(239,91,10,.75)));
background:linear-gradient(top,rgba(243,52,8,.75),rgba(239,91,10,.75))
Posts: 9,332
Threads: 375
Joined: Jan 2010
Reputation:
485
2011-05-28, 03:43 PM
This is the filter you need to use for IE to render css3 gradients: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#FFFFFF');
Hope it helps.
Posts: 1,993
Threads: 47
Joined: May 2006
Reputation:
215
2011-05-28, 03:44 PM
Try this:
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background:rgba(239,91,10,.75);
background:-moz-repeating-linear-gradient(top left -45deg, #1F2225, #1F2225 5px, #303030 5px, #303030 10px);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(243,52,8,.75)),to(rgba(239,91,10,.75)));
background:linear-gradient(top,rgba(243,52,8,.75),rgba(239,91,10,.75));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F2225', endColorstr='#303030');
I added the filter attribute.
Posts: 427
Threads: 107
Joined: Jul 2010
Reputation:
0
2011-05-28, 03:46 PM
(This post was last modified: 2011-05-28, 03:59 PM by xomp.)
@Sama34 Cool, that seems to have changed things a bit.
(2011-05-28, 03:44 PM)Aries-Belgium Wrote: Try this:
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background:rgba(239,91,10,.75);
background:-moz-repeating-linear-gradient(top left -45deg, #1F2225, #1F2225 5px, #303030 5px, #303030 10px);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(243,52,8,.75)),to(rgba(239,91,10,.75)));
background:linear-gradient(top,rgba(243,52,8,.75),rgba(239,91,10,.75));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F2225', endColorstr='#303030');
I added the filter attribute.
Great! even though it doesn't look like Firefox it's at least not orange lol
Posts: 10,063
Threads: 311
Joined: Oct 2008
Reputation:
457
2011-05-28, 03:53 PM
Just generate a background at http://www.stripegenerator.com/ and use it as the background. CSS3 is not worth it in this case.
The filters and hacks would be very complex in order to emulate what you currently have. If you really want to use CSS3 though, I recommend using something like CSS3PIE.
Posts: 427
Threads: 107
Joined: Jul 2010
Reputation:
0
2011-05-28, 03:58 PM
(2011-05-28, 03:53 PM)faviouz Wrote: Just generate a background at http://www.stripegenerator.com/ and use it as the background. CSS3 is not worth it in this case.
The filters and hacks would be very complex in order to emulate what you currently have. If you really want to use CSS3 though, I recommend using something like CSS3PIE.
Not a bad suggestion, how could I go about doing that exactly? I'm not all that pro with CSS heh
Posts: 10,063
Threads: 311
Joined: Oct 2008
Reputation:
457
2011-05-28, 04:09 PM
You mean using the stripe image as the background? It's pretty simple.
What's the full code of the class where you're applying the gradient?
Posts: 427
Threads: 107
Joined: Jul 2010
Reputation:
0
2011-05-28, 04:11 PM
Ah I managed to sort it  Thanks for the help!
|