Re: [css-d] question on space at bottom of page
Am 21.07.2011 15:44 schrieb Alan Gresley:
Out of curiously, can you please tell me what the following CSS is for.
/* To prevent jumping */
html {
min-height: 100%;
margin-bottom: 1px;
}
I have seen this before as a recommendation how to force a scrollbar, in
order to prevent centered contents from moving 8 pixels horizontally
when navigating between pages with and without scrollbars.
__
css-discuss [css-d@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] 100% height issue, and graphic placement q's
On 22/07/2011 2:34 PM, Ghodmode wrote:
On Fri, Jul 22, 2011 at 4:02 AM, G.Sørtungunla...@c2i.net wrote:
On 21.07.2011 20:30, John wrote:
Well, I am getting closer to tackling this issue, yet my playing with
values in the below body:after code didn't fix the issue which can be seen
in the screengrab here:
http://www.coffeeonmars.com/afterResults.jpg
Have more or less lost track of what you're trying to achieve...
I'm getting confused too, but I think I understand what we want to achieve.
So, I applied my original recommendation... I just copied my body:after
block into the stylesheet and this is what I came up with:
http://www.ghodmode.com/testing/coffeeonmars/
It works just like I said it would in Firefox, Chrome, Opera, and
IE9... not so much in earlier versions of IE.
I saw a lot of mistakes in the code like opening tags without closing
tags and stuff that just didn't make sense. I couldn't leave well enough
alone, so I modified it:
http://www.ghodmode.com/testing/coffeeonmars/fixed/
Delete the whole declaration block of _body:after_ and amend these two
style blocks.
.livebar {
width: 770px;
min-height: 100%;
overflow: auto;
margin: 0px auto;
background-color: #626862;
}
* html .livebar {
height: 1%; /* For IE6 since overflow: auto does not trigger hasLayout */
}
#menu {
float: left;
clear: left;
margin: 1em 0 0 0;
background-color: #808580;
width: 130px;
border:solid #424842;
border-width: 1px 0;
}
The layout should work in all browsers consistently. BTW, the below
comment is not quite true.
/* Margins are handled inconsistently on different
* browsers. Since this object is absolutely positioned
* anyway, use the position properties to position it
* instead of the margin.
margin: 10em 0 0 0;
*/
Please view these two test in IE7 comp. mode and you may understand what
is happening with IE7.
http://css-class.com/test/bugs/ie/haslayout-margins.htm
http://css-class.com/test/bugs/ie/floatsandblockelements.htm
And this article.
http://www.satzansatz.de/cssd/onhavinglayout.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] 100% height issue, and graphic placement q's
On Fri, Jul 22, 2011 at 10:17 PM, Alan Gresley a...@css-class.com wrote: ... The layout should work in all browsers consistently. BTW, the below comment is not quite true. /* Margins are handled inconsistently on different * browsers. Since this object is absolutely positioned * anyway, use the position properties to position it * instead of the margin. margin: 10em 0 0 0; */ I guess I was avoiding something that isn't really a problem any more. Before I commented out the margin to use positioning, there was something weird going on with the margins, though. In any case, I was referring to this: http://css-discuss.incutio.com/wiki/Box_Model_Hack#Why_does_the_CSS_box_model_need_a_hack.3F -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@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] question on space at bottom of page
On 7/22/11 4:48 AM, Markus Ernst wrote:
Am 21.07.2011 15:44 schrieb Alan Gresley:
Out of curiously, can you please tell me what the following CSS is for.
/* To prevent jumping */
html {
min-height: 100%;
margin-bottom: 1px;
}
I have seen this before as a recommendation how to force a scrollbar, in
order to prevent centered contents from moving 8 pixels horizontally
when navigating between pages with and without scrollbars.
Yup. This works, too:
html {
overflow-y : scroll;
}
--
Cordially,
David
__
css-discuss [css-d@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] 100% height issue, and graphic placement q's
Thanks for all the help Georg, Alan and Ghodmode... in a way, it's good to know that part of my woes were due to sloppy coding and tags... John On Jul 21, 2011, at 9:34 PM, Ghodmode wrote: On Fri, Jul 22, 2011 at 4:02 AM, G.Sørtun gunla...@c2i.net wrote: On 21.07.2011 20:30, John wrote: Well, I am getting closer to tackling this issue, yet my playing with values in the below body:after code didn't fix the issue which can be seen in the screengrab here: http://www.coffeeonmars.com/afterResults.jpg Have more or less lost track of what you're trying to achieve... I'm getting confused too, but I think I understand what we want to achieve. So, I applied my original recommendation... I just copied my body:after block into the stylesheet and this is what I came up with: http://www.ghodmode.com/testing/coffeeonmars/ It works just like I said it would in Firefox, Chrome, Opera, and IE9... not so much in earlier versions of IE. I saw a lot of mistakes in the code like opening tags without closing tags and stuff that just didn't make sense. I couldn't leave well enough alone, so I modified it: http://www.ghodmode.com/testing/coffeeonmars/fixed/ I put some explanatory comments in the stylesheet. This version works almost as well in IE8, and is at least usable in 7 and Quirks mode. Note that I've only used IE's Developer Tools Document Mode to test rendering for earlier versions of IE. I haven't used the actual earlier versions. -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@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-discuss [css-d@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] question on space at bottom of page
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Hucklesby
Sent: Friday, July 22, 2011 3:38 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] question on space at bottom of page
On 7/22/11 4:48 AM, Markus Ernst wrote:
Am 21.07.2011 15:44 schrieb Alan Gresley:
Out of curiously, can you please tell me what the following CSS is for.
/* To prevent jumping */
html {
min-height: 100%;
margin-bottom: 1px;
}
I have seen this before as a recommendation how to force a scrollbar,
in order to prevent centered contents from moving 8 pixels
horizontally when navigating between pages with and without scrollbars.
Yup. This works, too:
html {
overflow-y : scroll;
}
--
Cordially,
David
While David's solution does work, it causes a validation error. So, I've
been using the following code:
html {
height: 100.2%;
}
Gail
__
css-discuss [css-d@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-discuss [css-d@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] question on space at bottom of page
On 23.07.2011 00:28, Gail Issen wrote:
html { overflow-y : scroll; }
While David's solution does work, it causes a validation error.
Wrong. It validates as CSS 3 - not CSS 2.1.
Georg
__
css-discuss [css-d@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] question on space at bottom of page
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of G.Sørtun
Sent: Friday, July 22, 2011 5:54 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] question on space at bottom of page
On 23.07.2011 00:28, Gail Issen wrote:
html { overflow-y : scroll; }
While David's solution does work, it causes a validation error.
Wrong. It validates as CSS 3 - not CSS 2.1.
Georg
Can you direct me to a site where I can check for CSS3 validation?
Thanks,
Gail
__
css-discuss [css-d@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-discuss [css-d@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] question on space at bottom of page
On Fri, Jul 22, 2011 at 4:03 PM, Gail Issen gis...@sbcglobal.net wrote: Can you direct me to a site where I can check for CSS3 validation? http://jigsaw.w3.org/css-validator/ Check under More Options. :) __ css-discuss [css-d@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] question on space at bottom of page
On 23.07.2011 01:03, Gail Issen wrote: Can you direct me to a site where I can check for CSS3 validation? http://jigsaw.w3.org/css-validator/ Select More Options Profile : CSS level 3. Georg __ css-discuss [css-d@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] CSS3 Parse Error on Filter:
I am getting a Parse Error from the W3C Validator for CSS3 for the
following:
#header h1 {
font-family: Century Gothic, Geneva, Arial, Helvetica, sans-serif;
font-size: 5.5em;
font-weight: normal;
text-transform:lowercase;
color: #FF70B8;
line-height: 90px;
text-shadow: #33 -0.02em 0.02em 0.05em;
filter: Glow(color=#99, strength=2);
}
The Parse Error is on the line:
filter: Glow(color=#99, strength=2);
The page is at:
http://studiokaufman.com/site/anoulipolooza/index.html
and the CSS file at:
http://studiokaufman.com/site/anoulipolooza/css/AO_screen.css
I have Googled and Googled for some clue for what I have done to offend Mr.
Validator, but thus far every word on the subject I've found appears to
indicate that my code syntax is fine.
Can anyone point me the proper CSS3 documentation re filter: ?
Thanks so much,
Dan
d...@studiokaufman.com
www.StudioKaufman.com http://www.studiokaufman.com/
__
css-discuss [css-d@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] CSS3 Parse Error on Filter:
I thought filter was proprietary to IE? Maybe you could move the filter to an IE-specific stylesheet? __ css-discuss [css-d@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] CSS3 Parse Error on Filter:
On Jul 23, 2011, at 9:12 AM, Dan Kaufman wrote: I am getting a Parse Error from the W3C Validator for CSS3 for the following: I have Googled and Googled for some clue for what I have done to offend Mr. Validator, but thus far every word on the subject I've found appears to indicate that my code syntax is fine. Can anyone point me the proper CSS3 documentation re filter: ? There is none. Filter() is either (1) a Microsoft-only property or (2) a SVG effect (which you can use in Gecko 1.9.2+). http://www.w3.org/TR/SVG/filters.html Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@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] CSS3 Parse Error on Filter:
The Parse Error is on the line: filter: Glow(color=#99, strength=2); I thought filter was proprietary to IE? Maybe you could move the filter to an IE-specific stylesheet? Good point. Sometimes the obvious is the most unobvious. Thank you, Dan __ css-discuss [css-d@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/
