Forums
View unanswered posts | View active topics It is currently Tue Sep 02, 2014 10:38 pm



Reply to topic  [ 21 posts ]  Go to page Previous  1, 2, 3  Next
 About the disappearing "margin-top" known issue on IE6 & IE7 
Author Message

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: About the disappearing "margin-top" known issue on IE6 &
I've been doing some digging into DD_roundies, and it's actually not quite like you say -- the <ignore> element is indeed set to position:absolute, though it's applied via runtimeStyle so it doesn't show up in the styles list in the developer tools.

What's odd is that PIE and DD_roundies seem to be doing pretty much the same thing in terms of styling, but something about the order in which things run cause IE to not trigger the bug. I've actually been able to recreate this within PIE by mucking with the order of when the outer container's styles are applied, but things become incorrectly positioned then.

I'll keep digging into this.


Wed Jan 30, 2013 11:13 pm
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: About the disappearing "margin-top" known issue on IE6 &
Hi,

You're saying that the positions become incorrect. I think I know why.

I noticed this difference between PIE and DD_roundies:

Your <css3pie>, <shape> and <fill> elements have position:ansolute, and their top and left are "relative" to the PIE'd element. (like: "left: 0px; top: 5px")

But in DD_roundies, as said before, the container <ignore> has no position, but there's another thing: all the elements inside <ignore> (<shape> and <fill>) have their top and left relative to first ancestor which is in position: relative (<div#content>), not to the roundie'd element. When inspecting the download button, for example, we can see "left: 20px; top: 4620px;".

That's quite different!

So maybe you'll have to re-compute the position of your elements according to this rule...



EDIT: never mind, I was wrong. The offset is the same ;)


PS: "it's applied via runtimeStyle so it doesn't show up in the styles list in the developer tools", what does that mean? I don't see any difference in my DOM/CSS inspector...


Last edited by xem on Fri Feb 01, 2013 10:00 am, edited 1 time in total.



Thu Jan 31, 2013 2:34 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: About the disappearing "margin-top" known issue on IE6 &
Regarding runtimeStyle: IE exposes a element.runtimeStyle property, which behaves just like element.style except that it takes precedence. IE's developer tools don't show properties set in runtimeStyle in the styles in the Attributes column, you have to look in the Current Style column. Here's a screenshot of DD_roundies's <ignore> element -- notice position:absolute shows up in the Current Style column though it's not in the style attribute:

http://cl.ly/image/2R0G1B1r3635

As for the other stuff you said about positioning, I'm not seeing what you're seeing. For me, both PIE and Roundies work the same -- the outermost element is positioned absolute and its top/left are relative to the nearest positioned ancestor, and the shape elements within all have left/top of zero. There's no inconsistency there that I can see.

Anyway...

I dug in deeper and I've finally been able to get PIE to behave just like DD_roundies so it no longer triggers the margin-top collapsing bug. The secret, to my utter amazement, is a very specific combination of things that make absolutely no logical sense!

- When creating the vml container element, you have to assign its styles in two stages
- The first stage *cannot* include a z-index style
- The first stage *must* include background:none; -- it can also contain any other initial styles like position/top/left/etc.
- Then once the first stage's styles are set, the second stage can set the z-index style.

If you do these exact things in this exact order, then the margins don't collapse! This is boggling my mind and I've second-guessed myself on this several times, because it makes no logical sense why this should work, but it really does!

I'll be giving this some additional testing and committing it soon.


Thu Jan 31, 2013 10:53 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: About the disappearing "margin-top" known issue on IE6 &
@xem can you try out the attached PIE.zip, which contains this very strange fix?


Attachments:
PIE.zip [95.82 KiB]
Downloaded 183 times
Thu Jan 31, 2013 9:00 pm
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: About the disappearing "margin-top" known issue on IE6 &
Hi,

Please excuse my last post, indeed there's no difference between PIE and DD about this: the offset is relative to the closest relative parent in both cases.

Thanks for the explanation about runtimeStyle and about what you discovered today! That's crazy.

I just tested your fixed version of PIE and have to admit that it works like a charm! Great job. I'm glad that this bug is finally fixed.

And about that total nonsense, lol, if there's one thing I learned in my carrier of front-end expert, it's that if a hack works on IE, don't try to understand why, don't try to understand how, just use it :D

My head is filled with hundreds of IE hacks learned year by year, and I just use them everywhere, as dumb as they can seem. Any attempt to understand IE's logic just ends in a headache... so I don't try anymore :)

Thanks again!


Fri Feb 01, 2013 10:31 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: About the disappearing "margin-top" known issue on IE6 &
PS: isn't there a problem with your forum? I'm pretty sure that our posts were sent today and not in 2010 / 2011...


Attachments:
forum.png [39.44 KiB]
Not downloaded yet
Fri Feb 01, 2013 10:35 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: About the disappearing "margin-top" known issue on IE6 &
I think you're looking at the user joined date; the post date is below it. ;)

Thanks for testing and verifying that this crazy thing actually works! And thanks for pointing me to the fact that DD_roundies didn't have the bug, so I had something to try and match. I had long ago decided this bug was just going to be a fact of life, so I'm ecstatic that there's a workaround, no matter how strange. :D


Fri Feb 01, 2013 10:52 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: About the disappearing "margin-top" known issue on IE6 &
(oops, indeed...)

Yeah, that's great!
You're welcome and thanks to you too!
I wonder if you'll talk about that in a blog post...
Too technic maybe?
But still an interesting lesson!


Mon Feb 04, 2013 2:59 am
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: About the disappearing "margin-top" known issue on IE6 &
xem wrote:
I wonder if you'll talk about that in a blog post...
Too technic maybe?
But still an interesting lesson!


I, too, immediately thought that it would make for a nice and geeky blog post ;)

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Mon Feb 04, 2013 7:48 am
Profile

Joined: Wed Feb 27, 2013 5:26 pm
Posts: 1
Post Re: About the disappearing "margin-top" known issue on IE6 &
Guys .. this is a great job really .. I have one little concern.

Jason.. could you please update the current official download version ? I consider myself as the luckiest here .. I also thought that this problem won't be fixed at all. and I made the same (date mistake) "xem's" but I insist to continue reading your conversion hoping "only" to know where is the problem and try to work around it. then i downloaded the file with no hope .. and BOOM .. it's working :D

it will be better if you update the current download version.


Wed Feb 27, 2013 5:36 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 21 posts ]  Go to page Previous  1, 2, 3  Next

Who is online

Users browsing this forum: Baidu [Spider], Bing [Bot], Exabot [Bot], Google [Bot], Yahoo [Bot] and 1 guest


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:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.