Solved

gradient fails in IE8

Posted on 2010-09-09
3
941 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:
gurvinder372 earned 250 total points
ID: 33639714
0
 
LVL 12

Assisted Solution

by:Tony van Schaik
Tony van Schaik earned 250 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses

635 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