Re: [css-d] hybrid layout, wide table (IE6)
Brett Leber wrote:
... For conditional comments, do you think I should target IE6+ with these
additions? Out of curiosity, does IE7b2 render the table similarly to
IE6 (ie, off the screen) without your two additions?
IE7b2 does render the page identical to IE6. And the fix does work in
IE7b2 too. That said, there are different approaches to the problem that
IE7 is not real: IE7b2 is a beta that could be followed by a number of
betas and gammas. For example, they are asked to implement min-width,
max-width. If they do, it might be that they have to fix a number of
issues like this one you've encountered on that long way. On the other
hand, they have stated that the haslayout issue itself (how elements
are bound) is not changed, so I assume we will still need things like
zoom for a while -- but I can't know for sure.
Therefore, I think while it's important to test the hacks in IE7b2, it's
save to keep the conditionals excluding IE7:
titleData Shop/title
link rel=stylesheet href=allbrowsers.css type=text/css /
!--[if lt IE 7]
link rel=stylesheet href=iefix.css type=text/css /
![endif]--
/head
and iefix.css
/*
fix to bridle the table, prevents overflowing of the viewport
works in IE7b2, too
*/
#preview { float: left; }
#contents { zoom: 1; }
Once IE7 is more final, you can revisit these hacks and easily switch
the conditional from lt to less than or equal to: lte.
Lastly, how did you know that 'flow:left' and 'zoom:1' would do the
trick? I vaguely remember the redundant but effective 'zoom:1' being
mentioned in an article. Is either or both documented elsewhere?
I don't know those things, I have to try. We have compiled some
information on related problems here
http://www.satzansatz.de/cssd/onhavinglayout.html
Ingo
PS With bottom posting, I meant start typing below the quoted phrases ;)
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] hybrid layout, wide table (IE6)
Francky,
Thanks for the advice. Using your added styles, the result is better,
but adds scrollbars a bit differently than I'd intended:
http://www.andrew.cmu.edu/user/bleber/css/table_test3.html
Whereas in example 1 scrollbars appear for the container div (#preview),
example 3 creates scrollbars for the the entire layout table. In the
context of the project where this would be used, this produces a bizarre
effect. The issue is that scrolling the entire layout table is likely to
be very disorienting for a user.
Also frustrating is that the long table (the table with many columns)
increases the width of the layout table, effectively moving the
right-aligned parts of my header and footer off-screen. An inline frame
is starting to look a little more attractive for this disastrous table.
Either that or a fixed width for the container div (#preview). I think
the problem is with IE's interpretation of width:100%; on another area
of the site, this property/value pair produces a table that goes off the
right end of the containing div, with no scrollbars!
thanks again, and sorry for the verbose emails--I just can't think of a
simple way to describe all of this.
Brett
francky wrote:
Brett Leber wrote:
Please consider the table layout and nested divs to be a part of the
design requirements. Also, the following is an IE6 rendering issue, so
please view the examples in IE6.
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
[...]
How can I make example 2 display like example 1?
Hi Brett
Did you try:
* html body { width: 97%; overflow-x: auto; } ?
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] hybrid layout, wide table (IE6)
Brett Leber wrote:
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
The innermost table contains many cells in a single row longer than most
browser widths. To display it in the current page, I've used a container
div with overflow:scroll, and a width of 100%. When this table appears
within the divs alone, the overflow works correctly--the table is no
larger than the current browser (viewport) width, and scroll bars appear
[example 1]. When this table appears within a table used for page
layout, however, the width of the container div stretches to show the
entire table, past the viewport's boundaries, producing a horizontal
scroll bar in the browser [example 2].
How can I make example 2 display like example 1?
for
http://www.andrew.cmu.edu/user/bleber/css/styles.css
add
#preview {... float:left; }
#contents {...zoom: 1;}
and hide these from other browsers.
Works here for IE6 + IE7b2.
/**/
Brett, and the one or other who might read this:
please use /bottom/ posting on this list.
For those who read the digest, or those who just try to read and answer
more than one post per evening, it becomes nearly impossible to read
when the flow of the time is switched more than once per digest. ;)
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] hybrid layout, wide table (IE6)
Ingo,
This is great! Your additions seem to replicate the desired rendering.
These should work for the actual web project I'm working on as I've
tried to make my test case a simplified version of the same structure.
For conditional comments, do you think I should target IE6+ with these
additions? Out of curiosity, does IE7b2 render the table similarly to
IE6 (ie, off the screen) without your two additions?
Lastly, how did you know that 'flow:left' and 'zoom:1' would do the
trick? I vaguely remember the redundant but effective 'zoom:1' being
mentioned in an article. Is either or both documented elsewhere?
Thanks again!
Brett
PS - Hopefully I've replied to the list properly. I now see how time can
be switched if I reply to the message that appears /before/ the one from
css-d.
Ingo Chao wrote:
Brett Leber wrote:
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
The innermost table contains many cells in a single row longer than most
browser widths. To display it in the current page, I've used a container
div with overflow:scroll, and a width of 100%. When this table appears
within the divs alone, the overflow works correctly--the table is no
larger than the current browser (viewport) width, and scroll bars appear
[example 1]. When this table appears within a table used for page
layout, however, the width of the container div stretches to show the
entire table, past the viewport's boundaries, producing a horizontal
scroll bar in the browser [example 2].
How can I make example 2 display like example 1?
for
http://www.andrew.cmu.edu/user/bleber/css/styles.css
add
#preview {... float:left; }
#contents {... zoom: 1;}
and hide these from other browsers.
Works here for IE6 + IE7b2.
/**/
Brett, and the one or other who might read this:
please use /bottom/ posting on this list.
For those who read the digest, or those who just try to read and answer
more than one post per evening, it becomes nearly impossible to read
when the flow of the time is switched more than once per digest. ;)
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] hybrid layout, wide table (IE6)
Brett Leber wrote:
Please consider the table layout and nested divs to be a part of the
design requirements. Also, the following is an IE6 rendering issue, so
please view the examples in IE6.
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
[...]
How can I make example 2 display like example 1?
Hi Brett
Did you try:
* html body { width: 97%; overflow-x: auto; } ?
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] hybrid layout, wide table (IE6)
Please consider the table layout and nested divs to be a part of the design requirements. Also, the following is an IE6 rendering issue, so please view the examples in IE6. Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html The innermost table contains many cells in a single row longer than most browser widths. To display it in the current page, I've used a container div with overflow:scroll, and a width of 100%. When this table appears within the divs alone, the overflow works correctly--the table is no larger than the current browser (viewport) width, and scroll bars appear [example 1]. When this table appears within a table used for page layout, however, the width of the container div stretches to show the entire table, past the viewport's boundaries, producing a horizontal scroll bar in the browser [example 2]. (Recall that this is in IE6, not Firefox; Firefox 1.5 doesn't render the two differently.) How can I make example 2 display like example 1? There must be something I can change in CSS that I'm missing. Changing page structure is not an option; minor html changes are OK. I don't want to use an inline frame or new browser window (i.e., I'm hoping for a pure CSS fix here). I also want to keep the layout fluid. thanks, Brett Leber __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
