Firefox - Gradients

Im trying to get a Gradient to work in Firefox for our website. IE users see it, but Firefox, Opera & Netscape etc dont!

What im currently using is:

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#9EB3D1', gradientType='1');">
This is Firefox!!

Any chance somebody could help me out??


p.s Im new to Firefox so be friendly
LVL 16
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Filter is a non-standard Microsoft extension to CSS. There is no standard equivalent  , nor is there another (equivalent) non-standard property supported by other browsers.

The closest you are likely to come is a background image (or, and this is a horrible hack, a foreground image absolutely positioned to appear to be a background image).
yep, sorry the DX filters and transitions are lovely features, but unfortunately they are only any good when you can guaruntee a pure IE audience (an intranet).

The standard way is to create a gradient image, and use it as a background, unfortunatly this will not streatch dynamically as content grows, as stated above you could use z-ordering to position an images behind the text, BUT i have experienced difficulties when sizing an image relatively (i.e. using a percentage), so you may need additional script to capture the size of the area, before sizing the image.

There is certainly no easy way to achieve the microsoft filter on cross browser audience.

Consider your audience, and which browser they are likely to use, remember although other browsers are gaining headway (at last) IE will still be the browser that most (hate the term but) 'non-techies' use.
ellandrdAuthor Commented:
ok i was thinking so, but im still confused? if you view the M$ site in Firefox, the gradient is working fine and if you view source code, its showing the filter DX.

Would like to know how they are doing it??

i tried copying the code into textpad and viewing it, but it dont show up, but yet on M$, its shown...

Thanks for your comments

Nope, I'm affraid not, granted you can see the filter in the source, however if you look carefully at the two screens, on the firefox version only the 'title' has a gradient, there are two other sections on in IE that display gradients.

The Microsoft header is in fact

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ellandrdAuthor Commented:

So i see! Mmmm, well its a change of plan for me now

Many Thanks

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.