Olivier Sannier wrote:
[...]
> Thanks, this actually is the only thing of the two you proposed that has
> any effect.
> However, the first one got me thinking and I came up with this:
>
> *:first-child+html .innerContents
> {
> width: 98%;
> }
>
> .resizableArea
> {
> overflow-x: hidden;
> }
>
> This hides the horizontal scrollbar for all width of the window and
> makes the innercontents a bit smaller than 100% to account for the
> scroll bar hiding parts of it.
> Too bad there isn't any other way than using the "non standard"
> overflow-x property.
>
> Thanks for the pointers
>
> Cheers
> Olivier
This is not an issue about a "non standard" overflow-x property but
rather and issue about IE7 supporting an earlier version of CSS2.1
concerning overflow boxes and containing blocks. The scrollbar which you
are removing is part of the <html> element. In the specs can be seen.
<http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping>
"The behavior of the 'auto' value is user agent-dependent, but should
cause a scrolling mechanism to be provided for overflowing boxes.
The scrolling mechanism in each browser has a width of is either 18px or
19px. The descendant element of the <html> element is the <body> element
which you have given.
html, body {
height:100%;
width:100%;
}
In CSS2.1 for [10.3.3] Block-level, non-replaced elements in normal flow,
<http://www.w3.org/TR/CSS21/visudet.html#blockwidth>
"'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + 'margin-right' = width of
containing block
"
and along with this change [C.2.80 Section 11.1.1] Overflow.
<http://www.w3.org/TR/CSS21/changes.html#q87>
"The width of any scrollbars is no longer included in the width of the
containing block. (And consequently, all text in section 10.3 that
subtracts the scrollbar width from the containing block width has been
removed.)"
In browsers that are standard complaint (now including IE8), 100% = 100%
of the containing block but IE7 is trying to calculate 100% of 100% +
18px. For IE7, 98% + 18px (1~2%) = approximately 100% and is why this
solution works,
*:first-child+html .innerContents {
width: 98%;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
