Hi Elli,
o.k. here is what I found out step by step.
Regarding the top margin: You defined:
#support #printonline p, #support #online p {
clear: both;
width: 100%;
text-align: center;
margin: 0 0 15px;
padding: 0;
}
In http://www.w3.org/TR/CSS21/box.html#mpb-examples it says:
"If there are three values, the top is set to the first value, the left and
right are set to the second, and the bottom is set to the third."
Thus the top border of the paragraph is 0.
Instead, define:
#support #printonline p, #support #online p {
clear: both;
width: 100%;
text-align: center;
margin: 15px 0;
padding: 0;
}
That way the top margin will appear above the p.
The problem that the bottom margin is not maintained seems to be related to
the fact that you floated the p:
#printonline p, #online p {
float: left;
width: 150px;
display: inline;
margin: 6px 32px 0 16px;
padding-left: 0;
}
Why did you do that? If you delete "float: left;" and "display: inline;" the
bottom margin will be there. But there's even more margin as you wished.
That's related to the clearing divs. The following rule makes them float:
#support #printonline div, #support #online div {
float: left;
display: inline;
}
And you placed an " " in them:
<div class="cleared"> </div>
Change that to:
<div class="cleared"><!-- --></div>
And unfloat those divs with:
div.cleared {
clear: both;
height: 0;
float: none !important;
display: block !important;
}
You have to define the rules as "!important" because the selector of the
rule that makes the div a floated element (#support #printonline div,
#support #online div) has a higher specifity and the rule with the lower
specifity would be ignored otherwise.
After those changes - at least on my machine - it looked better in IE.
Best regards,
Christian Kirchhoff
> -----Original Message-----
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of
> Elli Vizcaino
> Sent: Wednesday, April 30, 2008 10:10 PM
> To: CSS Discuss
> Subject: [css-d] IE7 Margins Disappear?? Help Please
>
>
> Hello,
>
> Reposting because I'm feeling frazzled and in dire
> need of a response.
>
> http://e7flux.com/placead/placead3.html - in IE7 the
> margins of both the floated UL's seem to collapse as
> well as the margins on <p> tag I have at the bottom. I
> wrapped the first 2 <ul>'s in a div since IE6 doesn't
> understand min-height and I wanted them to line up but in IE
> 7 my margin's get collapsed with or without extra div and
> they also seem to affect the margins of the <p> tag at the
> bottom. What in the world is going on? I fail to understand
> and can someone help me please!!!
>
> Specific CSS targeting this template can be found
> under the /* Support Version */ comments in CSS file:
> e7flux.com/placead/css/placead.css
>
>
> TIA,
> Elli
>
>
>
>
>
> ______________________________________________________________
> ______________________
> Be a better friend, newshound, and
> know-it-all with Yahoo! Mobile. Try it now.
> http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
