SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Issues and workarounds

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    The blurring is caused by this:

    Code:
    .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://kilianvalkhof.com/2008/javasc...e-with-jquery/
    http://www.impressivewebs.com/css3-t...rnet-explorer/
    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. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The blurring is caused by this:

    Code:
    .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://kilianvalkhof.com/2008/javasc...e-with-jquery/
    http://www.impressivewebs.com/css3-t...rnet-explorer/
    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/
    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. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok found the error its in the line
    Code:
    -webkit-text-stroke: 1px #90F;
    which only affects chrome not Firefox hence the difference in look


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •