Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


CSS displaying incorrectly on IE9 on one Win7 computer but not on another, plus a background issue

Posted on 2011-10-04
Medium Priority
Last Modified: 2012-06-21
I am setting up a Drupal website which naturally is displaying differently on different computers, but there is one issue, where the site is different on two identical PC computers with Windows 7.

First, on all versions of IE, the background at the top of the page, which I think is done in html5 is missing in IE, maybe there is a special way  the CSS has to be formed for IE9? In IE9, the background is just blue, when it is supposed to be a gradient, see screen shot below.

Second, on my computer, the main navigation shows the correct way, with a gray background with white writing, but on my friend's computer, also Win7 and IE9, the links are impossible to read because they are white on white unless it is the active link.
This site is live while being built - biennainternational.com   this is the way it is supposed to look, this is from Firefox  
Question by:nanharbison
  • 4
  • 3

Accepted Solution

Jen0910 earned 1000 total points
ID: 36913367
IE9 cannot display CSS3 gradients, see CSS3PIE.com for a great work-around to display CSS3 elements in older IE versions. You'll want the -pie-background property, specifically.

When I have a spare few mins, I will take a look at your CSS for the links unless someone else can take care of it first, but i wanted to share with you the PIE option ;-)
LVL 17

Author Comment

ID: 36913382
Thanks Jen. I thought IE 9 was the newest version though?

Expert Comment

ID: 36913458
Nope, 10 is the version microsoft is setting to be compatible with HTML5/CSS3.

I'd recommend downloading IE tester (http://www.my-debugbar.com/wiki/IETester/HomePage) to help you see how your projects look in multiple versions of IE. You can then install IE 10 beta as your main version to check how things look in that environment. You should (hopefully) see the CSS3 functioning in 10.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 17

Author Comment

ID: 36913504
Wow, what a great resource, thanks for giving me this link. I am working on PIE, I add the CSS it gives me for the top and bottom color and then I point the behavior to the folder I downloaded PIE into, I think.
LVL 43

Assisted Solution

by:David S.
David S. earned 1000 total points
ID: 36914728
That page displays correctly in IE9 here and when checked via BrowserCam: http://home.browsercam.com/public.aspx?proj_id=565889

CSS3PIE is one option, but for a simple gradient like that, you could also use one of IE's proprietary filters: http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9

Expert Comment

ID: 36919528
Filters in IE are definitely one way to go, but tend to lok pretty rough, whereas PIE will help them look more smooth, like true CSS3. Your CSS rule will look something like

#item {behavior: pieFolderLocation/PIE.htc;
-pie-background: linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);

Any luck with the white/link background colors? Can you attached the stylesheet that directly applies to them?
LVL 17

Author Comment

ID: 36921412
I think my friend is viewing an old version of the page, at one point I was playing with colors/backgrounds of the main nav links. He is traveling now, so he can't check it.
I am having trouble with the PIE stuff. When I look at the elements on the page in the Chrome equivalent of firebug -the developer tools, this is the CSS for the top header is below, but the bottom two lines are crossed out, as well as the third and fourth lines, I am not sure what that means.

#header {
  background-color: #72899d;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#72899d), to(#151515));
  background-image: -moz-linear-gradient(-90deg, #72899d, #151515);
  background: #72899D;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#72899D), to(#151515));
  background: -webkit-linear-gradient(#72899D, #151515);
  background: -moz-linear-gradient(#72899D, #151515);
  background: -ms-linear-gradient(#72899D, #151515);
  background: -o-linear-gradient(#72899D, #151515);
  background: linear-gradient(#72899D, #151515);
  -pie-background: linear-gradient(#72899D, #151515);
  behavior: url(http://www.biennainternational.com/sites/default/files/PIE/PIE.htc);

Open in new window

LVL 17

Author Closing Comment

ID: 36944192
Thanks for the help! I couldn't get the PIE to work, but I think that is related to Drupal, the IE proprietary filter worked. I had to work on it, and go away from it for a while, and then go back to it, etc, so it took me the whole weekend to get working.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

578 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