Forums
View unanswered posts | View active topics It is currently Wed Apr 23, 2014 9:18 pm



Reply to topic  [ 8 posts ] 
 Margin Bug? 
Author Message

Joined: Wed Jul 21, 2010 10:17 pm
Posts: 2
Post Margin Bug?
It seems to be buggy with margins? I have two divs that are identical, one on top of the other for example
<div class="mydiv">...</div>
<div class="mydiv">...</div>

both have PIE enabled, but if you put margin on it, the top div doesn't seem to read the top margin, so if it put
.mydiv {
margin: 20px;
}
the top div doesn't read the top-margin. I don't know if this is a weird top-margin bug or something else but any help would be great.


Wed Jul 21, 2010 10:29 pm
Profile

Joined: Fri Jul 16, 2010 3:35 am
Posts: 9
Post Re: Margin Bug?
I can't replicate this - what PIE features are you using? By that I mean are you using border-radius or -pie-background or what?
Hopefully with a bit more information we can get a sloution for you!


Thu Jul 22, 2010 10:46 am
Profile

Joined: Wed Jul 21, 2010 10:17 pm
Posts: 2
Post Re: Margin Bug?
Hi, Sorry I'm referring to the border-radius. So when you have the border-radius set to something for some reason the top div wont show the top-margin.


Thu Jul 22, 2010 2:24 pm
Profile

Joined: Sat Aug 21, 2010 4:49 am
Posts: 1
Post Re: Margin Bug?
I'm facing the same problem in IE6 and IE7 - the top margin gets overridden by margin 0 after pie.htc steps in place. I can see the flickering right after the page is loaded and right before pie is activated, every item is in its place with correct margins applied. as soon as pie renders rounded corners on the elements with margins, the top margin gets deprecated, rest of the margins (if set) seem to be untouched.

I have been playing around with this for quite some time now, but without any success.

thanks in advance


Sat Aug 21, 2010 4:54 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Margin Bug?
This is due to a bug in IE, triggered when PIE forces hasLayout on the target element. I write about hasLayout issues briefly in the Known Issues documentation but don't give any specific examples; this, I believe, is one of them.

It's actually a combination of hasLayout on the target element, and also the insertion of an absolute-positioned element as a previous-sibling to the target element, both of which PIE does when it's applied. That combination triggers a bug in IE's layout engine where the top margin of the first element in a container disappears. Unfortunately I don't know of any way around it other than giving the container element padding-top rather than margin-top on the child element.


Sat Aug 21, 2010 8:56 am
Profile

Joined: Wed Aug 25, 2010 1:56 pm
Posts: 6
Post Re: Margin Bug?
This is a pretty serious problem, one that prevents me from using CSS Pie in places that I'd like to, because it messes up the margins so badly. Can this be fixed somehow? Maybe insert the css3-container into the original element, instead of before it. Or also insert an invisible 'height:0; overflow:hidden" element that has the top margin but isn't positioned. Something. Please.

I also have seen the children of the original element get moved. When the original element has a left border but no padding, and the child has no left margin, it gets moved over to the left from the original border disappearing. Shouldn't you be adding padding or somethign to compensate for the border you are removing?


Wed Aug 25, 2010 2:15 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Margin Bug?
@bkemper: I understand that it can be annoying. But I've not run into a situation yet where it can't be worked around fairly easily. Using padding versus margins, using floats, giving parent elements position:relative and/or zoom:1, etc. -- even your own suggestion about inserting a dummy element -- something always seems to work.

Quote:
Maybe insert the css3-container into the original element, instead of before it.


Making it a child has serious problems, such as clipping of border and box-shadow if the element has overflow:hidden, etc. Making it the previous-sibling is by far the most reliable solution out of all of them I've tried.

Quote:
Or also insert an invisible 'height:0; overflow:hidden" element that has the top margin but isn't positioned.


It's an interesting idea but I'm doubtful it could be done automatically in a reliable way. Inserting an element might work around this hasLayout bug in some cases, but would likely cause other problems in other cases. The problem is that it's probably impossible to detect which situations warrant it and which don't.

That said, I might consider allowing a custom CSS property (e.g. -pie-add-prev-sibling:true) that an author could include manually to instruct PIE to insert such an element. I'll give that some more thought. In the meantime, you can certainly add such an element yourself.

Quote:
When the original element has a left border but no padding, and the child has no left margin, it gets moved over to the left from the original border disappearing. Shouldn't you be adding padding or somethign to compensate for the border you are removing?


PIE doesn't remove the border. It simply hides it by setting border-color:transparent in IE7-8, and a trick with a nested element in IE6. So I think you're mis-diagnosing the issue. If you could post a code snippet which demonstrates what you're seeing that would be helpful so I can see what's actually going on.


Sun Aug 29, 2010 9:14 am
Profile

Joined: Wed Aug 25, 2010 1:56 pm
Posts: 6
Post Re: Margin Bug?
I don't always have the ability to change the HTML like I do with the shared CSS file. Sometimes it is because the HTML is coming from a vendor that lets me add a custom CSS file and maybe some custom text strings as to replace tokens, but not change the HTML that is shared with all of their clients. Other times, it is just not practical to edit HTML that appears on hundreds of static pages.

Changing the padding instead of the margin is something that only works if the element is a first child or last child or only child of it's parent. If I have several items (each with borders and padding) inside a single container, then adding padding to the container doesn't really do the trick for the ones in the middle. Also, the container may have a specific width may need to have no padding in order to more easily accommodate specific widths and heights (like 'height: 100%').


Mon Jan 24, 2011 1:48 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 

Who is online

Users browsing this forum: No registered users and 5 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.