Re: [css-d] Pitfalls of overflow

[Gunlaug Sørtun]

Barney Carroll wrote:
> I know this list isn't particularly keen on conceptual problems but I
>  have this notion that I can't conceive of without overflow on a 
> containing element which then comes round to bite me in the face.

Conceptual problems are certainly more interesting to work on than the
flow of browser- and designer-bugs we're mostly dealing with on css-d.

I'll stay out of the actual case, as you haven't presented a document to
work on. Also, it seems like you have limited your options a bit too
much by trying to plug a specific menu-solution into a specific
layout-solution. Yes, it seems like you'll end up "extending into
nowhere" with your combination.

I think you have at least a couple of options.

1: Layouts that are not relying on excessive paddings, negative margins
and 'overflow: hidden', are more suitable for that particular
menu-solution - as you have noticed already.

Myself, I don't use that layout-solution for "real" layouts, because of
all the limitations it puts on what I can do inside it, and all the
browser bugs/variations one may run into when challenging it a bit.
So, the easiest solution (IMO) is to use another layout-solution - one
that doesn't rely on 'overflow: hidden'.

I still prefer variations of...

...as it's the most "solid" base I've found to date.
CSS tables would be a better solution in many cases...

...but Internet Explorer doesn't support the CSS2.1 standard
properly yet, so that'll have to wait.


2: It's a misconception that 'absolute positioning' is needed to create
fly-outs on a menu. 'A:P' is perfect for the invisible state, but
'partly removed floats' can be ideal for the visual/:hover state.
'Partly removed floats' do have as much effect on their parents as we
want them to - the 'removed' part doesn't but the remaining part does.

What this means is that by having a menu that expands when sub-menu
levels are appearing on :hover, you can create a menu that expands with
its visible sub-menus and pushes the layout deeper and/or wider when
needed. You decide which direction and how much, by controlling how much
of the sub-menu that is 'removed from the flow'.
You don't even need floating sub-menus for this to work, you only need a
floating 'partly removed' menu-container and some 'stacking control'.
The simplest - only vertically expanding - menus won't need floats at
all, and they only need 'A:P' for sub-menus' invisible state.

So, in case you need something more to trigger your imagination, the
following example of 'nested and removed floats' may be of some use...

The demo is a bit old, but neither the standards nor the browsers have
changed much in the time that has passed.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pitfalls of overflow

[Rafael Holt]

On 20/12/06, Barney Carroll <[EMAIL PROTECTED]> wrote:

>
> Hi Raf,
>
> This site is fantastic - there's loads of fantastic little bits of css
> here I'd like to pull apart. The overflow selector for the drop-down
> menu is very, very cool.
>
> Sadly this wouldn't work for me because I can't select the parent of a
> :hover element (besides, the flyouts are only revealed after the a -
> they're not hover-based), and in any case toggling the overflow would
> cause the page to become 3 pixels high.
>
> Regards,
> Barney


Hi Barney

I'm glad you liked it, I've been at it for a few weeks now. Unfortunately I
keep adding more complex CSS to it that only Firefox, Opera and Safari
understand and I fear the fix for IE6 is going to be a hell of a job! I'll
just have to add more classes and ids for it.

This is an area where I think CSS is quite deficient. The inability to
affect the parent of something like you say. Something like #item <
div:hover {color:red;} would be nice, and I've wanted it before (where <
selects the parent). Unfortunately it seems like you might have to resort to
javascript. You can't just apply :hover to the parent directly?

All the best,

Rafael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pitfalls of overflow

[Barney Carroll]

Rafael Holt wrote:
> Hi,
> 
> I'm not sure exactly what you mean by nails in both feet, but I have a 
> ul within a div with overflow:hidden on a photo gallery I'm in the 
> middle of making. Go here  
> and change the number of thumbs to something small like 2. Then hover 
> your mouse over the number after the word "page" (where it says page 1 
> of X showing images...). That number is in a div and when you mouse over 
> it, the ul appears (when the div is hovered over, its overflow changes 
> to visible). There is no javascript there (but I've only tested it in 
> FF2 so far and it won't work in IE6 and probably not in IE7). I don't 
> know if this is what you're after, but it seems like it might be. Hope 
> it helps,
> 
> Rafael

Hi Raf,

This site is fantastic - there's loads of fantastic little bits of css 
here I'd like to pull apart. The overflow selector for the drop-down 
menu is very, very cool.

Sadly this wouldn't work for me because I can't select the parent of a 
:hover element (besides, the flyouts are only revealed after the a - 
they're not hover-based), and in any case toggling the overflow would 
cause the page to become 3 pixels high.

Regards,
Barney
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pitfalls of overflow

[Rafael Holt]

On 19/12/06, Barney Carroll <[EMAIL PROTECTED]> wrote:
>
> I know this list isn't particularly keen on conceptual problems but I
> have this notion that I can't conceive of without overflow on a
> containing element which then comes round to bite me in the face.
>
> I have my two columns, navigation and content, side by side. The nav is
> meant to extend to however long the content is. I have achieved this by
> using the padding-bottom:(massive); margin-bottom:-(massive); and
> overflow:hidden; technique.
>
> However my navigation has a two-layer deep UL system whereby the site's
> main sections are listed downwards on the left hand of the nav column,
> and any li's deeper ul is absolutely positioned to just to the right of
> it, so my submenu drops down.
>
> I have only just realised I am in deed trouble because when my submenu
> gets large it will simply extend into nowhere.
>
> I'm under the impression that position:absolute within an
> overflow:hidden; are nails in both feet. I'm wondering if anyone's ever
> succeeded in this - I'm certain it must have been done at some point,
> both techniques (flyout submenus and extending faux-table-cell columns)
> are so common... Or am I chasing an impossible (or just ultra risky)
> dream?
>
> Regards,
> Barney


Hi,

I'm not sure exactly what you mean by nails in both feet, but I have a ul
within a div with overflow:hidden on a photo gallery I'm in the middle of
making. Go here  and change the
number of thumbs to something small like 2. Then hover your mouse over the
number after the word "page" (where it says page 1 of X showing images...).
That number is in a div and when you mouse over it, the ul appears (when the
div is hovered over, its overflow changes to visible). There is no
javascript there (but I've only tested it in FF2 so far and it won't work in
IE6 and probably not in IE7). I don't know if this is what you're after, but
it seems like it might be. Hope it helps,

Rafael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pitfalls of overflow

[Bob Easton]

Barney Carroll wrote:
> I...
> 
> I'm under the impression that position:absolute within an 
> overflow:hidden; are nails in both feet. I'm wondering if anyone's ever 
> succeeded in this - I'm certain it must have been done at some point, 
> both techniques (flyout submenus and extending faux-table-cell columns) 
> are so common... Or am I chasing an impossible (or just ultra risky) dream?
> 

Does the submenu really need overflow:hidden?  I haven't tried it (or 
can't remember trying it), but what happens with overfolw:scroll on an 
absolutely positioned element?


-- 
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Pitfalls of overflow

[Barney Carroll]

I know this list isn't particularly keen on conceptual problems but I 
have this notion that I can't conceive of without overflow on a 
containing element which then comes round to bite me in the face.

I have my two columns, navigation and content, side by side. The nav is 
meant to extend to however long the content is. I have achieved this by 
using the padding-bottom:(massive); margin-bottom:-(massive); and 
overflow:hidden; technique.

However my navigation has a two-layer deep UL system whereby the site's 
main sections are listed downwards on the left hand of the nav column, 
and any li's deeper ul is absolutely positioned to just to the right of 
it, so my submenu drops down.

I have only just realised I am in deed trouble because when my submenu 
gets large it will simply extend into nowhere.

I'm under the impression that position:absolute within an 
overflow:hidden; are nails in both feet. I'm wondering if anyone's ever 
succeeded in this - I'm certain it must have been done at some point, 
both techniques (flyout submenus and extending faux-table-cell columns) 
are so common... Or am I chasing an impossible (or just ultra risky) dream?

Regards,
Barney
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/