Pitfalls with overflow hidden

[Chris Jaure]

Hi All,

I primarily just use grids and I'd like to document a couple of the pitfalls I've encountered because of the use of overflow:hidden as a new formatting context technique that I hadn't seen mentioned elsewhere.

Here's the demo: http://jsbin.com/3/aroyil/8

First issue is the box shadows get cut off. Second is third-party scripts like Chosen may not play nice together.

As you can see in the second set, I've used a different NFC technique (two actually, one for line and another for lastUnit) that avoids this issue. Not tested in IE6.

[Evan Winslow]

I seem to recall having problems with nesting when using table-cell for this.

Evan Winslow

http://community.elgg.org/pg/profile/ewinslow

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/object-oriented-css/-/KzxgaySsKTkJ.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

[Micky Hulse]

Not sure if this will be of any help, but I recently changed .line to this:

.line:before, .line:after { content: ""; display: table; } .line:after
{ clear: both; } .line { *zoom: 1; }

That's using micro clearfix:

<http://nicolasgallagher.com/micro-clearfix-hack/>

Which leaves us .lastUnit:

.lastUnit { width: auto; display: block; float: none; _position:
relative; _left: -3px; _margin-right: -3px; overflow: hidden;
*overflow: visible; *zoom: 1; }

... now, based on above code, .lastUnit (to me) is more of a "fix"
type of class; I've actually renamed it to .ufix (makes more sense now
that it's clearing also.)

So, that leaves us with .lastUnit having the overflow:hidden problem
in all browsers except IE<8.

I have not had a lot of time to experiment, but I wonder if there's an
alternative technique to remove the overflow:xxx bits from .lastUnit?

What about:

.lastUnit { width: auto; display: block; float: none; _position:
relative; _left: -3px; _margin-right: -3px; overflow: auto; _height:
1%; }

... which is taken from a technique explained here:

<http://pmob.co.uk/pob/caption-clear.htm>

I just tested, only in Firefox/Mac (I'm not at my workhorse/dev
computers which have all browsers) and it appears to work... Can
anyone test in IEs?

Thoughts?

Thanks,
Micky

[Micky Hulse]

On Fri, Jun 1, 2012 at 10:53 AM, Micky Hulse <rgm...@gmail.com> wrote:
> I just tested, only in Firefox/Mac (I'm not at my workhorse/dev
> computers which have all browsers) and it appears to work... Can
> anyone test in IEs?

FYI, for what it's worth, these are the browsers I test in (and not
through browsercam or similar):

MAC Snow Leopard:
Firefox 12.0, Safari 5.1.x, Opera 11.64, Chrome 19.0.x

PC Vista:
Firefox 3.6.x, Firefox 12.0, Chrome 19.0.x, Safari 5.1.x, Opera 11.64
IE 9.0.x, IE 8.0.x, IE 7.0.x

PC XP:
IE 6.0.x

iPhone 4:
4.3 (simulated), 5.1.1
iPhone:
4.3 (simulated)
iPad:
4.3 (simulated), 5.1.1

I'll test/experiment on Monday with .lastUnit and will post my results
(that's if I find an alternative solution to using overflow:hidden).

Have a great weekend all!

Cheers,
Micky

[Micky Hulse]

OK, Last comment:

I wonder if .lastUnit could be whittled down to this:

.lastUnit { width: auto; display: block; float: none; overflow: auto;
_height: 1%; }

Not sure, I would need to test, but:

_position: relative; _left: -3px; _margin-right: -3px;

... I assume the -3px stuff there to fix IE<7 3px jog bug? What bug
does position:relative fix in IE<7?

I still like to support IE6 (and above) but I would love to simplify
the .lastUnit class by ditching the underscore hacks. :)

Cheers,
Micky

[Chris Jaure]

Evan, I haven't tested for nesting so I'll do that to make sure there are no problems. Thanks for the warning.

mhulse, I don't think overflow: auto works much better than overflow: hidden for the problems I documented. Here's a new demo using your shortened css for lastUnit:  http://jsbin.com/3/aroyil/11

There should be an edit button in the upper right corner so feel free to edit the demo yourself to try out new ideas.

[Micky Hulse]

Hi,

On Fri, Jun 1, 2012 at 3:55 PM, Chris Jaure <chris...@gmail.com> wrote:
> mhulse, I don't think overflow: auto works much better than overflow: hidden
> for the problems I documented. Here's a new demo using your shortened css
> for lastUnit:  http://jsbin.com/3/aroyil/11

Ah, my mistake! I did not realize you were proposing a solution to the
problem. I'm in same boat with the grids (I don't use any of the other
OOCSS bits) and I've been wanting to find a way to not use
overflow:hidden. :)

I'll be sure to look more closely at your solution... I am all for not
using overflow:hidden, so whatever gets the job done. I would be
interested to test your solution via IE6... I'm downloading the VPC
images now and I'll let you know what comes of it.

Also, just to clarify the issues:

1. Box shadows of children of .line and .lastUnit are cut off.
2. What is Chosen? What does not work about it?

Cheers,
Micky

[Micky Hulse]

On Fri, Jun 1, 2012 at 4:30 PM, Micky Hulse <rgm...@gmail.com> wrote:
> I'll be sure to look more closely at your solution... I am all for not
> using overflow:hidden, so whatever gets the job done. I would be
> interested to test your solution via IE6... I'm downloading the VPC
> images now and I'll let you know what comes of it.

Not a lot of love in IE6 and IE7. Strangely enough, the first level
works fine, but when there's .line/.unit children, then it all goes to
hell. Maybe this is what Evan was referring to? I don't ever use
display:table-cell for layouts, so I'm not familiar with its browser
nuances.

Maybe I overlooked something with my CSS/HTML? Can anyone else confirm
my findings?

In IE8, your technique works good, but columns appear to drop when the
width is narrow; the overflow:auto technique shows scrollbars (the
overflow:hidden works best in this situation).

Note: Other than the above, I have only tested via Firefox 12 on a Mac
running Lion.

For those interested, here's my test page (I chose to upload to my
server vs. copy/pasting into jsbin.com or jsfiddle.com):

<http://sandbox.hulse.me/oocss.html>

... your example was good, but I don't use Chosen lib which seemed to
add a bit of overhead and clutter... When debugging/testing, I like to
focus on one problem at a time. :)

Thoughts?

Cheers,
Micky

[Chris Jaure]

Wow, you poked a bunch of holes in my technique :) I can reproduce the bugs you mentioned. Guess I've got some more work to do.

Chosen just replaces select elements with something better looking. The root problem is the use of position: absolute inside of a parent that's positioned relatively; anything that extends beyond a grid unit will get cut off. While this has been brought up before, every argument I saw assumed I had control over my styles, but in the case of third-party libraries or scripts, that isn't the case.

So it seems fine to use the micro clearfix on .line, but we need to find something else for .lastUnit.

On Friday, June 1, 2012 11:21:25 PM UTC-5, mhulse wrote:

[Micky Hulse]

On Sat, Jun 2, 2012 at 10:16 AM, Chris Jaure <chris...@gmail.com> wrote:
> Wow, you poked a bunch of holes in my technique :)

Well, unfortunately, yes. :(

I don't think there's an easy fix here.

> I can reproduce the bugs
> you mentioned. Guess I've got some more work to do.

I did some more testing, and display:table appears to work a tad
better than display:table-cell:

<code>

.unit {
word-wrap: break-word; /* Since we're already using hacks. */
position: relative; /* What are drawbacks? I would not mind. */
}
.ufix4 {
width: auto;
float: none;
display: table;
*display: block; /* IE<8 */
*overflow: visible; /* IE<8 */
*zoom: 1; /* IE<8 */
}

</code>

I've updated my demo page (it's the "Test 4" heading):

<http://sandbox.hulse.me/oocss.html>

Here are some notes:

* IE6/7 handle this well: Due to word-wrap:break-word style, the
columns shrink and expand very well (surprisingly better than Firefox
12 on OSX.)
* I removed all of the underscore hacks: I think this had to do with
IE5.5's 3px jog bug. That browser is dead and so is my support for it.
:)
* At small widths, these browsers drop the display:table columns:
Firefox 12, IE8, Safari, Opera and Chrome (those are all the ones I
had time to test in). Possible fix: break the cols into 100% widths
using media queries and mobile-first technique.
* Via IE6/7, and not to state the obvious, but overflow:visible does
not clip absolutely positioned child elements.

> Chosen just replaces select elements with something better looking. The root
> problem is the use of position: absolute inside of a parent that's
> positioned relatively; anything that extends beyond a grid unit will get cut
> off. While this has been brought up before, every argument I saw assumed I
> had control over my styles, but in the case of third-party libraries or
> scripts, that isn't the case.

Ahhh, I now understand your predicament. Thanks for clarifying.

Chosen sounds like a cool script. :)

> So it seems fine to use the micro clearfix on .line

Yah, the micro clearfix appears to work well. In fact, using that for
.line means that one can use box shadows and absolute positioned
elements for every col other than .lastCol (that is, if one decides to
keep overflow:hidden technique).

> but we need to find something else for .lastUnit.

Well, I guess it depends on the desired level of browser support. If
one doesn't 't need to worry about IE<8 (or whatever) then more
options are available (i.e. CSS3 stuff and/or
display:table/tabl-row/table-cell, other?)

I personally try to support IE6, so I'll probably stick with this:

<code>

.ufix {
width: auto;
float: none;
display: block;
overflow: hidden; /* This clips box-shadows. :( */
*overflow: visible; /* IE<8 */
*zoom: 1; /* IE<8 */
}

</code>

That's the original .lastUnit class, renamed and the underscore hacks
have been removed.

I might go with display:table though; if I do, I'll be using media
queries to break columns into 100% widths before the .lastUnit drops
below the preceding floated column.

Then again, I can just remember to not put anything important inside
of .lastUnit. :)

More thoughts?

Thanks again!

Cheers,
Micky