Results 1 to 3 of 3

Thread: Featured Content Slider text is blurry

  1. #1
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider text is blurry

    1) Script Title: Featured Content Slider

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...tentslider.htm

    3) Describe problem: In IE 7, all text inside the Slider DIV's is a little fuzzy around the edges. At first I thought it was only on my implementation but then I decided to look at the actual Dynamic Drive site in IE and its blurry there too.

    I'm assuming its something with the CSS causing this, but I really don't know.

  2. #2
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK, I've figured out it has something to do with the following CSS code:

    Code:
    .contentslide .opacitylayer{ /*Do not edit this rule unless you're familiar with CSS opacity behavior*/
    width: 100%;
    height: 100%;
    filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    
    }
    In particularly, the bolded parts. When I remove them, the text is not blurry. I now want to make another CSS property to override that property for the text only, but don't know enough about those properties to do that. Any ideas?

    I'm thinking something like this but the properties I've listed don't do the job.

    Code:
    .contentslide .opacitylayer h1,h2,h3,h4{
    filter:none;
    opacity: 1;
    }

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's a known issue in IE 7 with any text that has any filter applied to its element. It's worse than simply the styling, as the script looks like it depends upon fading (the alpha filter) for its transitions. This is also a problem in recent versions of Opera, although the mechanism is slightly different, it relies upon generic style opacity to fade, but the results are the same. The text loses its anti-aliasing quality.

    Try this script:

    http://www.dynamicdrive.com/dynamici...tentglider.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •