Solved

Some css elements are not working in IE11

Posted on 2013-12-30
4
2,609 Views
Last Modified: 2013-12-30
I have the following block in my css which is working pretty fine with the chrome, but not working at all with with IE11 (In IE11 I get just white empty block):

#button-login {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
        width: 80px;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
        background-position: right;
}

#button-login:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
        background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

#button-login:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
        background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
        background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

Open in new window


I believe that:
     background-image: -webkit-gradient()
        background-image: -moz-linear-gradient()

Open in new window



Is not working in IE11, but I am not sure how to fix it.
0
Comment
Question by:Ashraf Hassanein
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
For IE10+ you need to add -ms-linear-gradient declaration for the background-image
0
 

Author Comment

by:Ashraf Hassanein
Comment Utility
Thanks that was indeed the problem thanks for your help.
0
 

Author Closing Comment

by:Ashraf Hassanein
Comment Utility
Very helpful support
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
You'll be an HTML/CSS maestro before you know it.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now