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

Posted on 2011-10-04
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 -   this is the way it is supposed to look, this is from Firefox  
Question by:nanharbison
    LVL 8

    Accepted Solution

    IE9 cannot display CSS3 gradients, see 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

    Thanks Jen. I thought IE 9 was the newest version though?
    LVL 8

    Expert Comment

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

    I'd recommend downloading IE tester ( 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.
    LVL 17

    Author Comment

    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 42

    Assisted Solution

    by:David S.
    That page displays correctly in IE9 here and when checked via BrowserCam:

    CSS3PIE is one option, but for a simple gradient like that, you could also use one of IE's proprietary filters:
    LVL 8

    Expert Comment

    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-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

    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(;

    Open in new window

    LVL 17

    Author Closing Comment

    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

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    I starting with php 11 69
    Html and mvc 3 28
    Javascript - getdate 5 36
    Centering a div in html5 5 30
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    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 …

    754 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

    21 Experts available now in Live!

    Get 1:1 Help Now