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

Attach PIE.js automatically on elements with CSS3 properties
http://css3pie.com/forum/viewtopic.php?f=4&t=1306
Page 3 of 3

Author:  xem [ Mon Nov 28, 2011 10:38 am ]
Post subject:  Re: Attach PIE.js automatically on elements with CSS3 proper

Hi,

First, since Friday, I thought about my solution for the IE6/IE7 margin bug (replace margin-top with a position: relative & top += margin-top) and now I think it's not the good way to do it (even if it kinda works).
I don't like this because it forces the "position: relative" on all the elements after the margin-topped element - they could need another position than "relative", and my fix wouldn't be compatible with this.
So I'm gonna re-do it but with the solution we discussed earlier on this topic: viewtopic.php?f=3&t=1279

Quote:
Since you're trying to tackle margin collapsing here, do you happen to have a set of testcases that you're using to verify it works? If so, could you send them my way? I'm trying to integrate a workaround into PIE itself and testcases would be very useful.


For now, my only test case is the last attached HTML file, which of course isn't complete.
I'm okay to write such a test case, as soon as I have some time,
BTW thanks for your advices in this post viewtopic.php?p=4025#p4025 , i'll consider each of the points you mentioned.

Quote:
I've got some more comments on the current code, but this forum is a bit awkward for making line-level comments. Would you be able to check it into a public GitHub repository or something?


I'm already juggling with SVN and Mercurial on various projects but I guess I could try Git too ^^, I don't know how to use that yet.

So, see you soon.


PS: do you know why my tested border-image doesn't work on IE9 only?

Author:  xem [ Thu Dec 01, 2011 10:35 am ]
Post subject:  Re: Attach PIE.js automatically on elements with CSS3 proper

Hi Jason,

I'm trying to write a test case for margin-tops, but it's weird. When PIE isn't used on the page I can't reproduce the margin-top bug on IE6/7.

Even stranger, I can't get rid of the hasLayout = -1, even with a border or a zoom.

So I wonder why, with PIE, yhese borders disappear. Could that be a bug into PIE instead of a IE6/7 bug?

Thanks for your help.

Author:  jason [ Thu Dec 01, 2011 3:32 pm ]
Post subject:  Re: Attach PIE.js automatically on elements with CSS3 proper

The bug is triggered when the element with the top margin has a absolute-positioned element as its previous-sibling. Hence why PIE triggers it when it inserts its rendering element.

Author:  xem [ Fri Dec 02, 2011 5:14 am ]
Post subject:  Re: Attach PIE.js automatically on elements with CSS3 proper

Oh, I got it now.

That made me have an idea.

What if we put the PIE elements in position relative instead of absolute, and rearrange the rest?

I tried it and it works.

Here's my demo, detailing just in CSS what PIE could do with JS.

Can you try it and see if that could be the solution?

Code:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>margin-top</title>

  <style>
    /* Quick reset */
    * { margin: 0; padding: 0; }
  </style>

  <style>
    /* This is the CSS that we write. #div1 represents the PIE decoration (not here yet), #div2 represents the element on which we want margin-top: 200px */
    div { width: 300px; height: 20px; }
    #div1 { display: none; }
    #div2 { margin-top: 200px; border: 1px solid black;}
  </style>

  <!-- uncomment the next block to apply the PIE decoration without breaking the margin-top -->

  <!--
  <style>
    /* This is what PIE does for now: it inserts an absolute positioned element before the element we want CSS3 on. BUG: The margin-top disappears on IE6/7 */
    #div1 { display: block; position: absolute; }
  </style>
 
  <style>
    /* This is what PIE could do instead: insert the decoration in position relative, give it a top equal to the element's margin-top, and substract the decoration height from the element's margin-top. BUG fixed on all IEs. */
    #div1 { position: relative; top: 200px; }
    #div2 { margin-top: 180px; /* 200 - 20 */}
  </style>
  -->

</head>

<body>
  <div id="div1"> + PIE decoration</div>
  <div id="div2">_______________ element we want to PIE</div>
</body>

</html>


Cheers,
M.

Author:  xem [ Thu Dec 08, 2011 10:09 am ]
Post subject:  Re: Attach PIE.js automatically on elements with CSS3 proper

Hi,

I finally discovered that adding a listener to the "dom ready" event isn't an easy task.
Then I found this google code (http://code.google.com/p/domready) and this gitHub (https://github.com/ryanmorr/ondomready) providing just that feature taken from jQuery.
It works like a charm for all browsers. Here's my demo page:

Code:
<!doctype html>
<html>
<head>
  <meta charset=utf-8>
  <title>onDomReady</title>
  <script src="https://raw.github.com/ryanmorr/ondomready/master/ondomready-compressed.js"></script>
  <script>onDOMReady(function(){alert("ready");})</script>
</head>
<body>
  <img src="http://css3pie.com/forum/styles/serenity/imageset/logo.png">
</body>
</html>


So: I'll use it in the next version of my PIE autoloader :)

Author:  RGainesWebDev [ Thu Jul 03, 2014 12:31 pm ]
Post subject:  Re: Attach PIE.js automatically on elements with CSS3 proper

I apologize for dredging up an old thread, however I was interested in knowing if this project is still around, what the latest version is, and if the author was still lurking in the shadows.

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