SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Using IE filter to get a shadow makes text go dotty

    Sample page - http://ukfolkfestivals.co.uk/scotland.php

    I have a div with a shadow effect which uses
    Code:
    	-moz-box-shadow: 4px 4px 4px #ccc;
    	-webkit-box-shadow: 4px 4px 4px #ccc;
    	box-shadow: 4px 4px 4px #ccc;
    for modern browsers and then has
    Code:
    <!--[if IE]>
    <style type="text/css">
    #content {padding:0 5px;}
    /**BOX-SHADOWS FOR IE 5-8**/
    .accordionContent {
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5)";
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5);
    }
    .rightyImg{
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5)";
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5);
    background:#fff;
    }
    </style>
    <![endif]-->
    for not so modern ones. IE in other words.

    I've only just noticed that the text inside the divs is dotty in places. It's not the JQuery accordion effect interfering with things, as I've just added the same shadow effect to a single page on another site, as part of a sample upgrade, and got the same result there too, with no JQuery on the page. Cut out the conditional statement, and the text goes back to normal.

    Any ideas on how to get normal looking text in IE and retain the shadow effect? I hope I don't need a major re-write of the code.

    Or do I just have two cheap faulty screens (I'll be checking other monitors at the weekend at another location).

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean this bug:
    http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

    or more info here:
    http://www.yuiblog.com/blog/2008/12/08/imageopt-5/

    The text didn't actually look bad to me (on xp in ie7/8).

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Looks like that's the problem. Thought I'd done something wrong.

    It's also re-assuring that as a new site visitor, you didn't think it looked bad - I've seen those pages in FireFox lots of times, and somehow I didn't notice the difference in IE until today, when I was changing a page on another site, to show to a client. Suddenly it became very obvious to me.

    Of course an IE user wouldn't have seen the FF version and the difference wouldn't be as obvious to them.

    Thanks for having a 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
  •