Jump to content
Sign in to follow this  
mbreese1

IE is lamesauce, soapboxes are cool :)

Recommended Posts

mbreese1    1
mbreese1

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mbreese1    1
mbreese1

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
James B    436
James B

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

 

Glad it worked


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
      Thanks
      Michael
    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Jason
      By Jason+
      Hi.
      A previous thread mentioned problems with Splashup in IE.
       
      I am having these same issues. Everything is fine in firefox and chrome but IE displays only half the splash up section overlayed across the other content. See screen shots below.
      How it should look is Fire fox Splashup
      How it looks in IE is IE Splashup.
      Site is www.catholiccol.org.nz/live-preview-09-2016
       
      I have also attached shots of Inspect of each browser. As soon as I click on the ::after and ::before elements in IE the page displays correctly.
      I have tried Splashup on other sites and a local install with no custom css and all other plugins disabled but I still get the same problem.
       
      Any ideas?
       




    • arno
      By arno+
      Site that looks great on other browser, are is rendered wrong on IE: http://foodfunded.us/
      We got multiple complaints.
      The height of sections is way too high. Not sure which section is causing the problem, as they are in containers.
      Or is the size of the images?

      While most of us probably don't use IE, it might prevent professionals from getting client engagements with the PL5 tool, if the browsers don't have coverage.

    • sfmstudios
      By sfmstudios+
      Strange issue - see attached screenshot from www.bpetricone.com (cutoff one is IE, the other is Safari on iPad).  Only shows this way in IE11, and all other modern browsers are fine. I removed all extra CSS and all plugins and core files are up to date. 
       
      What are my options?  I already tried both putting them all in one container or having them separate. 


×