asked on

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

ASKER CERTIFIED SOLUTION

Jen0910

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

nanharbison

ASKER

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

Jen0910

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

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.

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Jen0910

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

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

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.