Archived

This topic is now archived and is closed to further replies.

  • 0

IE is lamesauce, soapboxes are cool :)


Question

Posted · Report post

Hi guys!!

 

Would anyone mind looking at http://strutcreativestudios.com/homie/ and helping me understand why my soapbox buttons are not styled correctly in IE?

 

I stole the code to style these directly from .btn-info, shortcode I placed on this page. I am not seeing what's wrong here. And I've been fighting with it for 2 hours. And I'm gonna cry soon. Please help :)

.button  {
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px !important;
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -ms-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(top,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}

input[type="submit"]:hover, .submit:hover, input[type="button"]:hover, .button:hover, input[type="reset"]:hover, .reset:hover {
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -ms-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(top,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}

.btn-info {
font-family: Philosopher;
}

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi there, for IE 9 try adding the another line to the gradient css in the following format

 

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc0de', endColorstr='#2f96b4',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #5bc0de 0%,#2f96b4 100%);
}

 

Code from - http://stackoverflow.com/questions/5897554/why-isnt-my-div-background-gradient-working-in-ie9

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, what version of IE are you viewing in?

Share this post


Link to post
Share on other sites

Posted · Report post

9 :)

Share this post


Link to post
Share on other sites

Posted · Report post

THANK YOU.

 

(I wish I knew what that filter meant, but I'm glad it works. Add it to my list of a billion more things to learn. Ugh, a billion and one!)

 

Bree :)

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome Bree, it's just a microsoft code/workaround for the gradient.

 

Glad it worked

Share this post


Link to post
Share on other sites