[css-d] IE7: Float parent not containing children margins...
Howdy, Normally, I use padding to fix margin collapse, but I can't seem to figure out how to get IE7 to contain the margins of the children paragraphs: https://dl.dropbox.com/u/1277106/float-margins.html Here's an IE7 screen shot: https://dl.dropbox.com/u/1277106/float-margins-ie7.jpg Every other browser contains the paragraph's margins within the float. It's strange... I have been using floats for a long time and I don't ever remember noticing this type of margin collapse problem in the past. Am I overlooking something obvious here? Is there a logic error with my HTML? Could it be the HTML5 document (i.e. missing a DTD that IE7 understands)? Is there an easy fix to get IE7 to behave the same as other browsers? TIA! Cheers, Micky __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] IE7: Float parent not containing children margins...
On May 26, 2012, at 3:19 AM, Micky Hulse wrote: Normally, I use padding to fix margin collapse, but I can't seem to figure out how to get IE7 to contain the margins of the children paragraphs: https://dl.dropbox.com/u/1277106/float-margins.html Here's an IE7 screen shot: https://dl.dropbox.com/u/1277106/float-margins-ie7.jpg Every other browser contains the paragraph's margins within the float. Yeah, IE 7 and older eats the top/bottom margins of the (first-/last-) child element of an element that has 'hasLayout' set to true (float triggers that flag). http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse Am I overlooking something obvious here? Is there a logic error with my HTML? Could it be the HTML5 document (i.e. missing a DTD that IE7 understands)? Is there an easy fix to get IE7 to behave the same as other browsers? Perhaps setting some padding on the parent element (your grey boxes), only for IE 7 ? (my memory is fuzzy, nowadays, IE 7 is in maintenance mode, I don't pay too much attention to small discrepancies with other browsers). Good, easy to understand, test case, btw, thanks for that. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] IE7: Float parent not containing children margins...
Hi Philippe! Thank you so much for your quick reply and help, I really
appreciate it. :)
On Fri, May 25, 2012 at 4:14 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
Yeah, IE 7 and older eats the top/bottom margins of the (first-/last-) child
element of an element that has 'hasLayout' set to true (float triggers that
flag).
http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse
Ugh, well that explains it! :D
I'm surprised that I never noticed the margin eating bug before!
Thanks for linkage. I've seen that document a few times before, but
I've always just skimmed over it... Hehe, I plan on reading through it
thoroughly this time!
Perhaps setting some padding on the parent element (your grey boxes), only
for IE 7 ? (my memory is fuzzy, nowadays, IE 7 is in maintenance mode, I
don't pay too much attention to small discrepancies with other browsers).
Good tips! I'm probably just going to ignore it and move on with life.
But padding is a good way to fix this if I really needed the top/bot margins:
.box { *padding: 20px 0; } /* targets = IE7 */
Note: I've dropped IE6 support (just feed it basic style sheet
http://code.google.com/p/universal-ie6-css/), so I have not checked
if it eats margins also.
Good, easy to understand, test case, btw, thanks for that.
Thanks! I'm glad it helped. :)
Again, thanks for all your help. I definitely owe you a case of Oregon
micro brews!
Have a great day!
Cheers,
Micky
P.S. What do you mean by maintenance mode? I did a quick Google
search, but did not see anything obvious... Are you referring to MS
eventually ditching support for IE6/7?
__
css-discuss [css-d@lists.css-discuss.org]
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/
