CSS Issues and workarounds

HTML & CSS
1

Hi all,

I am having some a number of issues with my css on a site. The site in question is http://www.webapp-testing.com/hangars/index.html The issues are listed below:

  1. When I load the site or the first time in google chrome the top menu is blurred but when I click on a link it gets clearer and I have no idea as to why.This doesn’t happen in Firefox and well IE doesn’t support text shadows.
  2. Which leads me to my next issue of how can I get text shadows in IE is their a simple workaround using jquery or something to that effect?
  3. As you can see the background has a gradient background which I tried to replicate within IE using an online tool however I am unable to get the design in the corners to show in IE (view the site in any other browser you should see the design in the corners) how can I solve this?

Thanks in advance for the help.

2

The blurring is caused by this:

.topmenu li {
text-align: center;
color: white;
text-shadow: 3px 3px 0 #90F, -1px -1px 0 #90F, 1px -1px 0 #90F, -1px 1px 0 #90F, 1px 1px 0 #90F;
}

Put the text shadow on the link, rather than on the LI.

There are some JS tools for getting text shadow in IE, such as

http://heygrady.com/text-shadow-for-internet-explorer

IE filters tent to make a mess of things, so for the backgrounds, you could try this: http://css3pie.com/

3

it still doesn’t show as clear as on firefox when I change the code the only difference now is that it doesnt come clearer when you click a menu link any thoughts?

4

ok found the error its in the line

-webkit-text-stroke: 1px #90F;

which only affects chrome not Firefox hence the difference in look