Forums
View unanswered posts | View active topics It is currently Wed Oct 22, 2014 4:20 pm



Reply to topic  [ 7 posts ] 
 Margins removed? 
Author Message

Joined: Fri Aug 06, 2010 7:42 am
Posts: 3
Post Margins removed?
Hello,

It seems that PIE is ignoring the margin-top (margin: 10px auto) as it jumps right against the previous element after the border is loaded. Any ideas as to why?

Here's the sample code:

I guess it has something to do with meyer reset css?

If the first section is not present (meyer reset), then it works fine in ie7/6. If it is, it goes straight to the top and ignores the margin.

Wesley

<!doctype html>
<html>
<head>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
body {
background:green;
}
#wrap {
background:yellow;
margin:10px auto;
padding:10px;
width:728px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 20px #CCC;
-webkit-box-shadow:0 0 20px #CCC;
-khtml-box-shadow:0 0 20px #CCC;
box-shadow:0 0 20px #CCC;
border:1px solid #ccc;
behavior: url(PIE.htc);
}
</style>
</head>
<body>
<div id="wrap">TESTING</div>
</body>
</html>


Fri Aug 06, 2010 7:48 am
Profile

Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
Post Re: Margins removed?
wesley wrote:
It seems that PIE is ignoring the margin-top (margin: 10px auto) as it jumps right against the previous element after the border is loaded. Any ideas as to why?

Hi Wesley, I think what you're seeing is a hasLayout issue. Basically, IE6 and IE7 have a non-standard layout mode for boxes that is triggered under certain circumstances (see link for details). PIE triggers hasLayout on PIE'd elements (see known issues).

One common bug with hasLayout is that top-margins on elements with hasLayout can sometimes get ignored. Luckily you can usually work around most hasLayout issues (this is sort of routine for web developers that work with IE).


Fri Aug 06, 2010 10:00 am
Profile WWW

Joined: Mon Aug 09, 2010 4:10 am
Posts: 1
Post Re: Margins removed?
I'm getting this error as well, and I don't think it is directly a hasLayout issue.

Here is my css:
Code:
      
      #error-panel {
         padding: 20px 20px 20px 100px;
         background: #ffe2e2 url(../images/error-warning.png) 20px center no-repeat;
         color: #a60000;
         margin: 10px 0;
         border: 1px solid #a60000;
         -moz-border-radius: 10px;
         -webkit-border-radius: 10px;
         border-radius: 10px;
         behavior: url(PIE.htc);
         zoom: 1;
      }
      

As you can see, I have given the #error-panel Layout by adding zoom: 1. The margin-top does not appear. When I remove "behavior: url(PIE.htc);", the margin-top appears correctly despite the fact that the #error-panel hasLayout.

I have very similarly styled boxes throughout my site but margins are disappearing consistently.

I think there may be a little bit more to this one!

Thanks,

Nick


Mon Aug 09, 2010 4:18 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Margins removed?
Yeah it's not *just* hasLayout, it's hasLayout in conjunction with the absolutely-positioned previous sibling element that PIE injects. I've found that combination often causes top margins to mysteriously disappear.


Thu Aug 12, 2010 9:34 pm
Profile

Joined: Thu Jan 20, 2011 8:42 am
Posts: 40
Post Re: Margins removed?
Is there any solution for margin auto issue in ie7?


Mon Dec 19, 2011 5:10 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Margins removed?
What margin auto issue is that?


Mon Dec 19, 2011 11:14 am
Profile

Joined: Thu May 24, 2012 6:40 am
Posts: 1
Post Re: Margins removed?
What cause the issue is border-radius or border-shadow
solutions:
1.make the element float;
2.position
3.ie-css3.htc :lol:


Thu May 24, 2012 7:42 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

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