box-shadow doesn't work on grid contained elements [#1546800]

Comment #1

johnalbin

they/他

English

Taipei, Taiwan

commented 25 April 2012 at 23:21

You mean the shadow is clipped by the parent container?

Log in or register to post comments

Comment #2

johnalbin

they/他

English

Taipei, Taiwan

commented 26 April 2012 at 02:07

Ok. This is a deceptively simple change, but it has massive implications.

Changing the clearfix method has subtle, but important changes to Zen Grids' containers. Compass' default clearfix method adds block formatting context to our containers. Changing to a different clearfix method means the container may not have the block formatting context anymore.

http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/ explains it best.

I wonder if display:inline-block can be used.

Log in or register to post comments

Comment #3

mustanggb commented 26 April 2012 at 09:44

I think "display: inline-block;" is fine if we can guarantee to always specify a width.

Also what is the issue with using the previous method, i.e.

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}

Log in or register to post comments

Comment #4

johnalbin

they/他

English

Taipei, Taiwan

commented 26 April 2012 at 17:32

I think "display: inline-block;" is fine if we can guarantee to always specify a width.

Right. Good point. And since we can't guarantee the item will have a width, we can't use it. :-\

what is the issue with using the previous method

Technically nothing. I was having some odd margin issues with it. But I figured out why that was happening after reading the thinkvitamin article above (see demo #1).

When I converted all the stylesheets to Compass, I just started using its clearfix mixin. It fixed the margin issues I was having. But I didn't notice the problems you mentioned. That is definitely a bug with them.

It looks like we need to use this clearfix technique: http://nicolasgallagher.com/micro-clearfix-hack/

Compass has the pie-clearfix mixin which is "adapted" from the above technique. Unfortunately, they seemed to have adapted away the margin fix I need. :-\