Re: [css-d] Properly toggling the positioning of elements in a DD

2006-11-22 Thread Paul Novitski
At 11/22/2006 11:40 AM, Austin, Darrel wrote:
>I'm using this very nice bit of javascript and CSS to create a
>expandable/collapsible DL:
>
>http://www.tjkdesign.com/articles/toggle_elements.asp
>
>The specific CSS that is used to toggle the positioning of the DD is
>this:
>
>#TJK_DL .showDD {position:relative;top:0}
>#TJK_DL dd,.hideDD{top:-px;position:absolute}
>
>The problem I am having is that in IE6, I can't seem to get any nested
>elements within the DD to also reposition.


I've had problems trying to position things above the viewport but 
I've never had a problem positioning them to the left:

.hide
{
 position: absolute;
 left: -1000em;
}

Notice I'm using ems, not px, so the distance increases with the font 
size, making it less likely the content will intrude into the viewport.

Something like this would be more foolproof:

{
 position: absolute;
 left: -Luu;
 width: 1px;
 overflow: hidden;
}

where uu is any length unit and Luu is any measurement large enough 
to guarantee that the display will be forced off-screen.  This 
confines the content to a box that cannot come on-screen regardless 
of font size.  I imagine the same could be done using top & height, 
although I've had trouble getting IE to shift absolute children above 
a relative parent.

Negative left positioning is not without its critics, but it's always 
worked for me.

One problem with these techniques arises when the 
absolutely-positioned child has a relatively-positioned parent and 
the top or left rule is relative to the parent, not the viewport 
itself.  Measurements like -1000em or -px are hacks that work 
with today's monitors but are not friendly to future monitors of much 
higher resolutions.  If we could guarantee that we're moving the 
object relative to the top or left edge of the window, we could use 
much smaller measurements (like 2px) with the overflow: hidden technique.

Regards,
Paul 

__
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] Properly toggling the positioning of elements in a DD

2006-11-22 Thread Austin, Darrel
I'm using this very nice bit of javascript and CSS to create a
expandable/collapsible DL:

http://www.tjkdesign.com/articles/toggle_elements.asp

The specific CSS that is used to toggle the positioning of the DD is
this:

#TJK_DL .showDD {position:relative;top:0}
#TJK_DL dd,.hideDD{top:-px;position:absolute}

The problem I am having is that in IE6, I can't seem to get any nested
elements within the DD to also reposition.

For example, this code will work fine in both FF and IE:


   My text


However, this only works in FF:


   My text


In IE, it seems to reposition the DD, as it makes enough space for the
content, but the content contained within the DD doesn't seem to get
repositioned as well.

Is this a CSS issue, and, if so, is there something noticable that is
causing this issue? A fix?

-Darrel
__
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/