Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] Button gradient CSS trouble in IE (of course)


  • dwsowash
    Participant

    @dwsowash

    WordPress 4.0 running Catch Box theme.
    BuddyPress 2.1
    GothicSpider.com

    I’m having button style trouble in IE9 (maybe newer versions too but I only have 9) FireFox and Chrome work great.
    I’m using a gradient fade on buttons and in ie it only works on my ‘Post Update’ button. I can’t get it to take on my ‘Leave Group, Like, UnLike, ect.’ buttons.

    My buddypress.min.css is….

    #buddypress .comment-reply-link,#buddypress a.button,#buddypress div.generic-button a,#buddypress input, #buddypress input[type=button],#buddypress input[type=reset],#buddypress input[type=submit],#buddypress ul.button-nav li a,a.bp-title-button{
          border:solid 2px #333;
    	background: #990000; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#990000, #000000);
    	background: -o-linear-gradient(#990000, #000000);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#990000), to(#000000)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#990000, #000000);
    	/* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#990000, endColorstr=#000000)";
    
          -webkit-border-radius:6px;
    	-moz-border-radius:6px;
    	border-radius: 6px;
    	-ms-filter-border-radius: 6px;
    	color:#E4741F;
    	font-size:.9rem;
    	cursor:pointer;
    	outline:0;
    	padding:3px 3px;
    	text-align:center;
    	text-decoration:none
     

    Less importantly but I would still like to fix is the tiny bits of red extending above the button border on the top corners right at the blue arrow.

    Thanks for any help. This one’s got me stumped.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Henry Wright
    Moderator

    @henrywright

    Hi @dwsowash

    Iā€™m having button style trouble in IE9 (maybe newer versions too but I only have 9) FireFox and Chrome work great.

    That doesn’t surprise me, IE is an awful browser to design for.

    Check out Can I use, which will show you which browsers support which CSS properties.

    Hope that helps.


    dwsowash
    Participant

    @dwsowash

    The link you gave is good to have but if you look at the image I posted the button I’ve circled in blue has the gradient effect I’m going for.
    I just can’t get it to apply to all the rest of them.


    dwsowash
    Participant

    @dwsowash

    RESOLVED

    Colorzilla.com is an excellent cross browser gradient generator.


    Henry Wright
    Moderator

    @henrywright

    @dwsowash glad to hear you found a solution! šŸ™‚

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] Button gradient CSS trouble in IE (of course)’ is closed to new replies.
Skip to toolbar