Re: [css-d] Opera 10 and percentage min-height
Bruno Fassino wrote: On Fri, Feb 19, 2010 at 10:54 PM, Ingo Chao ichaoc...@googlemail.com wrote: 2010/1/3 Bruno Fassino fass...@gmail.com FWIW, the IE8 vertical resize problem seems fixed by the presence of some specific content inside the min-height container, for example a display:table box, which can be empty and added with :after http://brunildo.org/test/minheightIE8_2.html As you said, Opera can be fixed by the addition of some box, so playing a bit more, the following seems to satisfy both Opera10 and IE8, using :after for both (I needed to add a position:relative on html for Opera) http://brunildo.org/test/minheightIE8OP10.html (Well, it's surely better to avoid these hacks altogether :-) and just live with the resize problem...) Thanks so much, Bruno! I just tried your pseudo-element solution in Opera 10 for a footerStickAlt-related problem and it worked well. Don't understand why position:relative on html changed the game, though. Well, I've no idea, what Opera is doing here is really strange. Without that position:relative the fix doesn't work. It can also be applied to body instead of html. Also strange is that the added a.p. element must have a percentage height, including 0%. Best regards, Bruno I have suspicions that html is not the *initial containing block* or root container in Opera 10. This is since it uses a variant of the star html hack [1] that affect IE7-. Much like hasLayout in IE (or position relative bugs), such simple layout is only possible when something else has to be calculated. Consider this test. http://css-class.com/test/css/box/min-height-resizing-opera-hack.htm The solution was a min-height: 100% container with padding-top:1px and margin-top:-1px. I have no idea why 0% works in this case with generated content. For me it like feeding background-position: 0 0; to IE7- to kick in hover transitions. 1. http://css-class.com/test/bugs/opera/opera-tilde-selector-bug.htm -- 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/
Re: [css-d] Opera 10 and percentage min-height
On Fri, Feb 19, 2010 at 10:54 PM, Ingo Chao ichaoc...@googlemail.com wrote: 2010/1/3 Bruno Fassino fass...@gmail.com FWIW, the IE8 vertical resize problem seems fixed by the presence of some specific content inside the min-height container, for example a display:table box, which can be empty and added with :after http://brunildo.org/test/minheightIE8_2.html As you said, Opera can be fixed by the addition of some box, so playing a bit more, the following seems to satisfy both Opera10 and IE8, using :after for both (I needed to add a position:relative on html for Opera) http://brunildo.org/test/minheightIE8OP10.html (Well, it's surely better to avoid these hacks altogether :-) and just live with the resize problem...) Thanks so much, Bruno! I just tried your pseudo-element solution in Opera 10 for a footerStickAlt-related problem and it worked well. Don't understand why position:relative on html changed the game, though. Well, I've no idea, what Opera is doing here is really strange. Without that position:relative the fix doesn't work. It can also be applied to body instead of html. Also strange is that the added a.p. element must have a percentage height, including 0%. Best regards, Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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/
Re: [css-d] Opera 10 and percentage min-height
2010/1/3 Bruno Fassino fass...@gmail.com On Sun, Jan 3, 2010 at 1:09 AM, Alan Gresley a...@css-class.com wrote: [...] http://satzansatz.de/op/minheightrootoverflow.html What you see is the whole viewport covered by the min-height div. If you drag the bottom of the window upwards in IE8 and Opera 9~10 you will see a vertical scrollbar appear. Now refresh the page and the scrollbar disappears. Now drag the bottom of the window downwards in IE8 and Opera 9~10 you will see the background of the HTML appear under min-height div. This is re-flowed by these methods. a. Refreshing the page. b. Dragging the left or right edge of the window in either direction. c. Providing a hover transition effect to either the div, body or html. The only way that I can fix (hack) Opera 9~10 is to insert another div. This I presume breaks the 100% critical crisis point. IE8 still has the bug. http://css-class.com/test/css/box/min-height-resizing-opera-hack.htm FWIW, the IE8 vertical resize problem seems fixed by the presence of some specific content inside the min-height container, for example a display:table box, which can be empty and added with :after http://brunildo.org/test/minheightIE8_2.html As you said, Opera can be fixed by the addition of some box, so playing a bit more, the following seems to satisfy both Opera10 and IE8, using :after for both (I needed to add a position:relative on html for Opera) http://brunildo.org/test/minheightIE8OP10.html (Well, it's surely better to avoid these hacks altogether :-) and just live with the resize problem...) Thanks so much, Bruno! I just tried your pseudo-element solution in Opera 10 for a footerStickAlt-related problem and it worked well. Don't understand why position:relative on html changed the game, though. Best, Ingo __ 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/
[css-d] Opera 10 and percentage min-height
Getting out of practice.
Does Opera/Mac up to 10.10 has a bug with percentage min-height?
(not in 10.5 pre-alpha anymore)
http://satzansatz.de/op/minheight.html
And display:inline-block (or float) seems to fix it for a moment, just
to break again with a width?
!DOCTYPE html
html
head
titlemin-height/title
style type=text/css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
/style
/head
body
divThis red area should fill the screen/div
/body
/html
__
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/
Re: [css-d] Opera 10 and percentage min-height
Ingo Chao wrote:
Getting out of practice.
Does Opera/Mac up to 10.10 has a bug with percentage min-height?
(not in 10.5 pre-alpha anymore)
http://satzansatz.de/op/minheight.html
And display:inline-block (or float) seems to fix it for a moment, just
to break again with a width?
!DOCTYPE html
html
head
titlemin-height/title
style type=text/css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
/style
/head
body
divThis red area should fill the screen/div
/body
/html
Opera Version
10.10
Build
6790
Platform
Mac OS X
Browser identification
Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.10
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
http://chelseacreekstudio.com/ca/cssd/a.png
div {
background: red;
min-height: 100%;
display: inline-block;
/* width: 100%; */
}
http://chelseacreekstudio.com/ca/cssd/b.png
div {
background: red;
min-height: 100%;
display: inline-block;
width: 100%;
}
http://chelseacreekstudio.com/ca/cssd/c.png
Note: In Opera I default to a fuchsia screen and minimum font-size 32px.
Best,
~d
--
http://chelseacreekstudio.com/
__
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/
Re: [css-d] Opera 10 and percentage min-height
On Sat, Jan 2, 2010 at 12:55 PM, Ingo Chao ichaoc...@googlemail.com wrote:
Getting out of practice.
Does Opera/Mac up to 10.10 has a bug with percentage min-height?
(not in 10.5 pre-alpha anymore)
http://satzansatz.de/op/minheight.html
And display:inline-block (or float) seems to fix it for a moment, just
to break again with a width?
!DOCTYPE html
html
head
titlemin-height/title
style type=text/css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
/style
/head
body
divThis red area should fill the screen/div
/body
/html
I see the same problem in Opera 10.10 XP.
The really strange thing is that I have some pages with a similar
construct which do not show the problem. I tried to track down what
triggers the difference and it seems to be (but I'm not sure)
html {
overflow-y: scroll;
}
that I have in my pages. This seems to fix the problem. Really strange...
Best regards,
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
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/
Re: [css-d] Opera 10 and percentage min-height
On Jan 2, 2010, at 10:33 PM, Bruno Fassino wrote:
I see the same problem in Opera 10.10 XP.
The really strange thing is that I have some pages with a similar
construct which do not show the problem. I tried to track down what
triggers the difference and it seems to be (but I'm not sure)
html {
overflow-y: scroll;
}
that I have in my pages. This seems to fix the problem. Really strange...
Interesting.
:root { overflow: auto; }
also fixes the issue here, without that dead scrollbar.
And the issue is currently fixed in the Opera 10.5 pre-alpha build I have open.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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/
Re: [css-d] Opera 10 and percentage min-height
Ingo Chao wrote:
Getting out of practice.
Does Opera/Mac up to 10.10 has a bug with percentage min-height?
(not in 10.5 pre-alpha anymore)
http://satzansatz.de/op/minheight.html
And display:inline-block (or float) seems to fix it for a moment, just
to break again with a width?
!DOCTYPE html
html
head
titlemin-height/title
style type=text/css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
/style
/head
body
divThis red area should fill the screen/div
/body
/html
Thank you Ingo. This solves the problem of why my test with a sticky
footer does not work in Opera 10.00 on XP / Win.
http://css-class.com/test/demos/sticky-footer1.htm
This is not a problem with positioning but min-height. To fix the bug
with my test with the sticker footer in Opera, one must resize the
viewport from a corner of the window. This re-flow causes Opera to work
(footer is where it should be).
Testing your test case by the same method by causing re-flow fixes your
test case and min-height works in Opera.
Opera 9.25 also shows a related problem with your test case if the
bottom of the window is dragged down (reveals color of HTML). The fix
again, one must resize the viewport from a corner of the window to cause
re-flow.
--
Alan http://css-class.com/
__
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/
Re: [css-d] Opera 10 and percentage min-height
Philippe Wittenbergh wrote:
On Jan 2, 2010, at 10:33 PM, Bruno Fassino wrote:
I see the same problem in Opera 10.10 XP.
The really strange thing is that I have some pages with a similar
construct which do not show the problem. I tried to track down what
triggers the difference and it seems to be (but I'm not sure)
html {
overflow-y: scroll;
}
that I have in my pages. This seems to fix the problem. Really strange...
Interesting.
:root { overflow: auto; }
also fixes the issue here, without that dead scrollbar.
And the issue is currently fixed in the Opera 10.5 pre-alpha build I have
open.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
Yippy and happy new year. We now have a truly cross browser sticky
footer solution. With,
:root { overflow: auto; }
http://css-class.com/test/demos/sticky-footer3.htm
and,
html { overflow-y: scroll; }
http://css-class.com/test/demos/sticky-footer4.htm
I still note that the old Opera 9 bug is still present. Opera 9.25~10.00
shows a problem when the bottom of the window is dragged down (reveals
color of HTML). The fix again, one must resize the viewport from a
corner of the window to cause re-flow.
--
Alan http://css-class.com/
__
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/
Re: [css-d] Opera 10 and percentage min-height
On Sat, Jan 2, 2010 at 3:30 PM, Alan Gresley a...@css-class.com wrote:
Yippy and happy new year. We now have a truly cross browser sticky footer
solution. With,
:root { overflow: auto; }
http://css-class.com/test/demos/sticky-footer3.htm
and,
html { overflow-y: scroll; }
http://css-class.com/test/demos/sticky-footer4.htm
I still note that the old Opera 9 bug is still present. Opera 9.25~10.00
shows a problem when the bottom of the window is dragged down (reveals color
of HTML). The fix again, one must resize the viewport from a corner of the
window to cause re-flow.
Yes, I see this, and the problem is still present in the 10.50
preview, at least in Win XP:
If the browser window is not full screen and you resize it just in the
_vertical_ direction then Opera fails to recompute the
min-height:100%; so either the HTML color shows up at the bottom when
the window's height is increased or a v-scrollbar shows up when the
window's height is reduced. The problem disappears if the windows is
resized (even slightly) in the horizontal direction ore refreshed.
The problem is also present in Opera 10/Mac even if here is a bit more
difficult to reproduce it, being more difficult to resize a window
just in the vertical direction (at least with the mouse, don't know if
there is a keyboard way to do it).
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
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/
Re: [css-d] Opera 10 and percentage min-height
Bruno Fassino wrote:
On Sat, Jan 2, 2010 at 3:30 PM, Alan Gresley a...@css-class.com wrote:
(snip)
I still note that the old Opera 9 bug is still present. Opera 9.25~10.00
shows a problem when the bottom of the window is dragged down (reveals color
of HTML). The fix again, one must resize the viewport from a corner of the
window to cause re-flow.
Yes, I see this, and the problem is still present in the 10.50
preview, at least in Win XP:
If the browser window is not full screen and you resize it just in the
_vertical_ direction then Opera fails to recompute the
min-height:100%; so either the HTML color shows up at the bottom when
the window's height is increased or a v-scrollbar shows up when the
window's height is reduced. The problem disappears if the windows is
resized (even slightly) in the horizontal direction ore refreshed.
The problem is also present in Opera 10/Mac even if here is a bit more
difficult to reproduce it, being more difficult to resize a window
just in the vertical direction (at least with the mouse, don't know if
there is a keyboard way to do it).
Bruno
Viewing Ingo's test case,
http://satzansatz.de/op/minheight.html
in IE8 XP/Win shows the same results as you have detailed above for
Opera 10 and Opera 10.5 XP/Win. So much for IE8 being a CSS2.1
supporting browser. I find the best fix for the resizing with min-height
bug is this,
:root { overflow: auto; }
since no scrollbar is rendered. The resizing with min-height bug is not
present in IE7. I think this is due to the scrollbar always being
visible. Both bugs are not present in IE7 or IE8 here,
http://css-class.com/test/zeta.htm
which uses min-height with absolute positioning but the resizing with
min-height bug is still present in Opera 9.25~10.00 XP/Win. Hovering the
sticky footer (anywhere) causes re-flow and temporary fixes the bug in
Opera until the it is triggered again when resizing the window.
--
Alan http://css-class.com/
__
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/
Re: [css-d] Opera 10 and percentage min-height
Thanks! here is the testcase with the :root:overflow fix http://satzansatz.de/op/minheightrootoverflow.html without: http://satzansatz.de/op/minheight.html best Ingo __ 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/
Re: [css-d] Opera 10 and percentage min-height
Ingo Chao wrote: here is the testcase with the :root:overflow fix http://satzansatz.de/op/minheightrootoverflow.html Great! I arrived late on this thread, and it is good the see a fix has been found for that irritating bug. regards Georg __ 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/
Re: [css-d] Opera 10 and percentage min-height
Ingo Chao wrote: here is the testcase with the :root:overflow fix http://satzansatz.de/op/minheightrootoverflow.html Great! I arrived late on this thread, and it is good the see a fix has been found for that irritating bug. Same here. Thanks Ingo and Bruno! -- Regards, Thierry | www.tjkdesign.com __ 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/
Re: [css-d] Opera 10 and percentage min-height
G. Sørtun wrote:
Ingo Chao wrote:
here is the testcase with the :root:overflow fix
http://satzansatz.de/op/minheightrootoverflow.html
Great!
I arrived late on this thread, and it is good the see a fix has been
found for that irritating bug.
regards
Georg
What bug are you talking about. There were two bugs.
1. min-height bug with Opera 10.00 as demonstrated by Ingo and fixed
with :root { overflow: auto; }.
2. resizing with min-height bug with IE8 and Opera 9~10.
Bruno gave a very detailed description of the resizing with min-height
bug. To see it, go here.
http://satzansatz.de/op/minheightrootoverflow.html
What you see is the whole viewport covered by the min-height div. If you
drag the bottom of the window upwards in IE8 and Opera 9~10 you will see
a vertical scrollbar appear. Now refresh the page and the scrollbar
disappears. Now drag the bottom of the window downwards in IE8 and Opera
9~10 you will see the background of the HTML appear under min-height
div. This is re-flowed by these methods.
a. Refreshing the page.
b. Dragging the left or right edge of the window in either direction.
c. Providing a hover transition effect to either the div, body or html.
The only way that I can fix (hack) Opera 9~10 is to insert another div.
This I presume breaks the 100% critical crisis point. IE8 still has the bug.
http://css-class.com/test/css/box/min-height-resizing-opera-hack.htm
Another test case shows a slight variation of the resizing with
min-height bug. The primary difference is that the body has a min-height
of 100% instead of a height.
http://css-class.com/test/css/box/min-height2.htm
In both Opera 9~10 and IE8, when a vertical scrollbar appears, it
possible to scroll upwards and downwards and have the absolutely
positioned box move.
When the bug is triggered in Opera 9~10, the min-height div expands to
show a red background. This remains until a double refresh happens. When
a vertical scroll bar appears in Opera 9~10, one refresh will make the
vertical scrollbar disappear. A second refresh will cause the min-height
div with the red background to disappear.
--
Alan http://css-class.com/
__
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/
Re: [css-d] Opera 10 and percentage min-height
Alan Gresley wrote:
What bug are you talking about. There were two bugs.
I'm only interested in the following...
1. min-height bug with Opera 10.00 as demonstrated by Ingo and fixed
with :root { overflow: auto; }.
...and the fact that it appears to be fixed in upcoming Opera versions.
Have a nice year, all.
regards
Georg
__
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/
Re: [css-d] Opera 10 and percentage min-height
On Sun, Jan 3, 2010 at 1:09 AM, Alan Gresley a...@css-class.com wrote: [...] http://satzansatz.de/op/minheightrootoverflow.html What you see is the whole viewport covered by the min-height div. If you drag the bottom of the window upwards in IE8 and Opera 9~10 you will see a vertical scrollbar appear. Now refresh the page and the scrollbar disappears. Now drag the bottom of the window downwards in IE8 and Opera 9~10 you will see the background of the HTML appear under min-height div. This is re-flowed by these methods. a. Refreshing the page. b. Dragging the left or right edge of the window in either direction. c. Providing a hover transition effect to either the div, body or html. The only way that I can fix (hack) Opera 9~10 is to insert another div. This I presume breaks the 100% critical crisis point. IE8 still has the bug. http://css-class.com/test/css/box/min-height-resizing-opera-hack.htm FWIW, the IE8 vertical resize problem seems fixed by the presence of some specific content inside the min-height container, for example a display:table box, which can be empty and added with :after http://brunildo.org/test/minheightIE8_2.html As you said, Opera can be fixed by the addition of some box, so playing a bit more, the following seems to satisfy both Opera10 and IE8, using :after for both (I needed to add a position:relative on html for Opera) http://brunildo.org/test/minheightIE8OP10.html (Well, it's surely better to avoid these hacks altogether :-) and just live with the resize problem...) Best regards, Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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/
