asked on 10/4/2011

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

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

white-navigation-backgrounds.jpg

CSS HTML Web Frameworks

Last Comment

nanharbison

10/10/2011

ASKER CERTIFIED SOLUTION

Jen0910

10/4/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

nanharbison

10/4/2011

ASKER

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

Jen0910

10/4/2011

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.

nanharbison

10/4/2011

ASKER

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.

SOLUTION

David S.

10/5/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Jen0910

10/5/2011

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?

nanharbison

10/5/2011

ASKER

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

nanharbison

10/10/2011

ASKER

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.