| Author |
Message |
|
kdawson
Joined: Sat Jul 17, 2010 1:55 pm
Posts: 6
|
 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".
|
| Sat Jul 17, 2010 2:04 pm |
|
|
|
gordonbrander
Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
|
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">
...
...
...
|
| Sat Jul 17, 2010 2:27 pm |
|
|
|
kdawson
Joined: Sat Jul 17, 2010 1:55 pm
Posts: 6
|
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.)
|
| Sat Jul 17, 2010 2:46 pm |
|
|
|
jas0995
Joined: Sat Jul 17, 2010 3:20 pm
Posts: 1
|
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.
|
| Sat Jul 17, 2010 3:24 pm |
|
|
|
kdawson
Joined: Sat Jul 17, 2010 1:55 pm
Posts: 6
|
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.
|
| Sat Jul 17, 2010 3:44 pm |
|
|
|
gordonbrander
Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
|
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.
|
| Sat Jul 17, 2010 4:43 pm |
|
|
|
kdawson
Joined: Sat Jul 17, 2010 1:55 pm
Posts: 6
|
Re: Background color flashes & vanishes
|
| Sat Jul 17, 2010 7:46 pm |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1401
|
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.
|
| Sun Jul 18, 2010 8:21 am |
|
|
|
kdawson
Joined: Sat Jul 17, 2010 1:55 pm
Posts: 6
|
Re: Background color flashes & vanishes Yes, position: relative did the trick, thanks.
|
| Sun Jul 18, 2010 9:41 am |
|
|
|
gordonbrander
Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
|
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!
|
| Sun Jul 18, 2010 9:50 am |
|
|
Forums
