Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

gradient fails in IE8

Posted on 2010-09-09
3
Medium Priority
?
943 Views
Last Modified: 2012-08-13
Hi Experts,
I am trying to make a webpage with gradient background.  I need  it to be cross browser compatible.
The gradient seems to work all other browsers except IE 8. I know that microsoft changed it in IE8. i tried adding -ms-filter prefix but does not work.
I need to figure this out immediately.  Please help.
0
Comment
Question by:guyneo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1000 total points
ID: 33639714
0
 
LVL 12

Assisted Solution

by:Tony van Schaik
Tony van Schaik earned 1000 total points
ID: 33657820
This snippet should work:

But unless you are running your website in quirksmode it won't work.

<style>
	#gradient-with-stop {
		color: #fff;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-linear-gradient(left top, #00f, #fff 70%);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";
	}
</style>

<div id="gradient-with-stop">
	Gradient
</div>

Open in new window

0
 
LVL 1

Author Closing Comment

by:guyneo
ID: 33772904
Thanks Guys.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

721 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