CSS3 PIE Forums
http://css3pie.com/forum/

Background color flashes & vanishes
http://css3pie.com/forum/viewtopic.php?f=3&t=18
Page 1 of 2

Author:  kdawson [ Sat Jul 17, 2010 2:04 pm ]
Post subject:  Background color flashes & vanishes

I can't get PIE working for a rather simple case: a header element with background color and rounded corners.

I'm on a Mac, so testing under VMWare / Win 7 (IE 8). The behavior is identical for all combinations of IE7/8 browser mode and document mode: the background color of the styled H3 flashes briefly and then is removed. At a guess, the color shows as IE first processes the CSS and displays the page, but it is removed for some reason when PIE.htc is processed.

Test file is at http://dawson.nu/PIEtest.html which invokes PIEtest.css in the same directory. PIE.htc is there as well. The Apache server's config file contains "AddType text/x-component .htc".

Author:  gordonbrander [ Sat Jul 17, 2010 2:27 pm ]
Post subject:  Re: Background color flashes & vanishes

I'm guessing there's a very good chance this is because the code you're using is missing a DOCTYPE. When there is no DOCTYPE on a page, it renders in quirks mode causing all kinds of problems.

Try something like this for your test case document:

Code:
<!DOCTYPE html>
<html>
<head>
   <title>Testing CSS3 PIE</title>
   <link rel=stylesheet type="text/css" href="PIEtest.css"> 
...
...
...

Author:  kdawson [ Sat Jul 17, 2010 2:46 pm ]
Post subject:  Re: Background color flashes & vanishes

Thanks for the quick response. That was a promising lead. But with the addition of <!DOCTYPE html> -- nothing changes. (I did View Source from IE8 to make sure it wasn't caching the old version.)

Author:  jas0995 [ Sat Jul 17, 2010 3:24 pm ]
Post subject:  Re: Background color flashes & vanishes

Well... you test page fails validation rather badly for so sort a page. Since we are working on
something new here, fix your page until it passes validation at http://validator.w3.org/check.
This is especially the case with strange CSS problems.

Author:  kdawson [ Sat Jul 17, 2010 3:44 pm ]
Post subject:  Re: Background color flashes & vanishes

Thanks jas0995. Fixed it so it validates now. No change in the PIE behavior.

Oh, and I tried a variant where the background of the H3 is an image instead of a color (you can see that commented out now in View Source). That does not show up either, but it doesn't flash first as the background color does.

Author:  gordonbrander [ Sat Jul 17, 2010 4:43 pm ]
Post subject:  Re: Background color flashes & vanishes

Interesting. This looks like it may be a PIE bug. The PIE elements are there, but they are coming in beneath the container with the background color. You can see this by removing the background color using the IE inspector tool. The odd thing is, I've been using PIE for a while and haven't run into this issue before.

kdawson, could you file a bug linking to this test case? Be sure to include PIE version used, plus any other details.

Author:  kdawson [ Sat Jul 17, 2010 7:46 pm ]
Post subject:  Re: Background color flashes & vanishes

Done, http://github.com/lojjic/PIE/issues/issue/38 . Thanks for your help.

Author:  jason [ Sun Jul 18, 2010 8:21 am ]
Post subject:  Re: Background color flashes & vanishes

I'm pretty sure this is the classic z-index issue biting you -- see the top of http://css3pie.com/documentation/known-issues/

Try either:
1. Giving the h3 position:relative, or
2. Giving the container element position:relative and a z-index.

Author:  kdawson [ Sun Jul 18, 2010 9:41 am ]
Post subject:  Re: Background color flashes & vanishes

Yes, position: relative did the trick, thanks.

Author:  gordonbrander [ Sun Jul 18, 2010 9:50 am ]
Post subject:  Re: Background color flashes & vanishes

Glad we got that cleared up. kdawson, I left a comment on the bug with a link to this thread and details on how to fix. Do you think you could close it (I don't have permission, since you created it)? Thanks!

Page 1 of 2 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/