SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 7 PNG Transparency Background Issue

    Hi there,

    Here's a screen grab of what my page is supposed to be looking like (thanks Google Chrome, you really are perfect). The gray gradient horizontal bar is the #stats div, with the #welcome div beneath the gray gradient bar.



    And here's what IE 7 is doing to my PNG background in the #stats div. IE 7 seems to be filling the semi-transparent part of my PNG background (landing/bg-stats.png) that's supposed to be my drop shadow with an all-black fill (I'm not using a CSS drop shadow -- the drop shadow is in my PNG background). At first, I thought IE 7 was somehow applying a border-bottom to the #stats div, but it's not. IE 7 is altering the PNG background image.



    Code:
    		#stats {
    			width: 100%;
    			height: 60px;
    			background: url('./landing/bg-stats.png') repeat-x; /* IE 7 IS FILLING THE SEMI-TRANSPARENT PART OF THIS PNG WITH BLACK FILL */
    			font: 13px Shanti;
    			text-align: center;
    			color: #333;
    			
    			text-shadow: 1px 1px 1px #d5d5d5;
    			filter: dropshadow(color=#d5d5d5, offx=1, offy=1); /* THIS IS FOR TEXT, NOT REFERENCING MY BACKGROUND PROBLEM */
    		}
    
    		#welcome-container {
    			/* placeholder */
    		}
    		#welcome {
    			width: 960px;
    			padding: 30px 0 20px 0;
    			margin: 0 auto;
    			color: #222; /* #c2c2c2 */
    			font: 18px Shanti, sans-serif;
    			line-height: 27px;
    			background: url('./landing/welcome-arrow.png') no-repeat 457px 315px;
    		}
    
    <div id="stats">
    	<div class="stats-container">
    		<!-- etc... -->
    	</div>
    </div>
    
    <div id="welcome-container">
    	<div id="welcome">
    		text here
    	</div>
    </div>
    This seems to be some odd and weird transparency issue with my background. I've applied this PNG fix to my page, but it hasn't fixed my background issue.

    http://jquery.andreaseberhard.de/pngFix/index.html

    Any ideas of why IE 7 is filling the semi-transparent part of my PNG background with black fill? I'm stumped.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    IE7 normally handles PNG's pretty well so you shouldn't ever need to use a PNG fix, is there a link we can use to see your site as its going to be extremely difficult trying to debug the issue without a physical source to look at.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page is located at http://eggcave.com/landing

    Let me know what you think... and that's what I've been thinking about IE 7. It normally handles PNGs fine.

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    I looked at your page in IE9, and the same thing happens. When I disabled the filter drop shadow, the problem went away.
    "First make it work. Then make it better."

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    I looked at your page in IE9, and the same thing happens. When I disabled the filter drop shadow, the problem went away.
    As Jeff said the filter is the cause of the issue, the way I look at a website using CSS3 is that all modern browsers should look pretty with shadows and rounded corners but IE shouldn't get any special treatment as filters slow down the performance of a browser quite a lot when you run performance tests.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha! Thanks for bringing this to my attention, guys. Much more simple than I thought the fix would be.


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
  •