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:-9999px;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 -9999px 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/
