Forums
FAQ • Search • Login
Register
View unanswered posts | View active topics It is currently Wed Jun 19, 2013 3:24 pm

Board index » General Discussion

All times are UTC - 7 hours [ DST ]



Reply to topic  Page 3 of 3
  [ 25 posts ]  Go to page Previous  1, 2, 3
Print view Previous topic | Next topic 
 Attach PIE.js automatically on elements with CSS3 properties 
Author Message
xem

Joined: Thu Apr 07, 2011 3:23 am
Posts: 66
Post 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?
Mon Nov 28, 2011 10:38 am
Profile
xem

Joined: Thu Apr 07, 2011 3:23 am
Posts: 66
Post 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.
Thu Dec 01, 2011 10:35 am
Profile
jason

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1401
Post 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.
Thu Dec 01, 2011 3:32 pm
Profile
xem

Joined: Thu Apr 07, 2011 3:23 am
Posts: 66
Post 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.
Fri Dec 02, 2011 5:14 am
Profile
xem

Joined: Thu Apr 07, 2011 3:23 am
Posts: 66
Post 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 :)
Thu Dec 08, 2011 10:09 am
Profile
Display posts from previous:  Sort by  
Reply to topic   Page 3 of 3
  [ 25 posts ]  Go to page Previous  1, 2, 3

Board index » General Discussion

All times are UTC - 7 hours [ DST ]

Who is online

Users browsing this forum: No registered users and 2 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.