Re: [css-d] Mystery space
I am back with the same problem. David pointed out the issue, however I really don't understand WHY it's happening, and how to even things out. http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html On this page, I want the footer copyright to hug the bottom of the container above it. In FF, it looks as desired (yes, i'll add a little space in later) but in Safari 4.0.5 (current release) it has a gap. Removing the box-shadow had no effect. What am I missing here? -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Mystery space
On Mon, Jun 7, 2010 at 10:12 AM, Tom Livingston tom...@gmail.com wrote: I am back with the same problem. David pointed out the issue, however I really don't understand WHY it's happening, and how to even things out. http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html On this page, I want the footer copyright to hug the bottom of the container above it. In FF, it looks as desired (yes, i'll add a little space in later) but in Safari 4.0.5 (current release) it has a gap. Removing the box-shadow had no effect. What am I missing here? Update: The gap also appears in IE8. Also, what is the proper way to use rgb as a fallback to rgba ? I have: color: rgb(255,255,255); color: rgba(255,255,255,.4); I saw this somewhere with the mention that the rgba would be ignored by unsupported browsers, but IE6 and 7 show black not white. TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Mystery space
On Jun 7, 2010, at 11:12 PM, Tom Livingston wrote: I am back with the same problem. David pointed out the issue, however I really don't understand WHY it's happening, and how to even things out. http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html On this page, I want the footer copyright to hug the bottom of the container above it. In FF, it looks as desired (yes, i'll add a little space in later) but in Safari 4.0.5 (current release) it has a gap. Removing the box-shadow had no effect. What am I missing here? min-height is what you are missing. Or rather, the issue you see comes from your usage of min-height on your wrapper. And I'm not sure if Firefox, per current spec, is correct (the paragraph in the latest spec is much more filled with ambiguity [1]). The space you see in WebKit / Opera is the margin-bottom on the p that contains 'Tagline'. In Gecko based browsers, that margin-bottom is contained within the min-height wrapper (it cannot escape). WebKit allows the margin to collapse through, creating the gap you see. [1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining. There is a longish thread on www-style on the subject, starting here: http://lists.w3.org/Archives/Public/www-style/2008Sep/0081.html http://wiki.csswg.org/spec/css2.1#issue-79 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] Mystery space
On Mon, Jun 7, 2010 at 10:51 AM, Philippe Wittenbergh e...@l-c-n.com wrote: On Jun 7, 2010, at 11:12 PM, Tom Livingston wrote: I am back with the same problem. David pointed out the issue, however I really don't understand WHY it's happening, and how to even things out. http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html On this page, I want the footer copyright to hug the bottom of the container above it. In FF, it looks as desired (yes, i'll add a little space in later) but in Safari 4.0.5 (current release) it has a gap. Removing the box-shadow had no effect. What am I missing here? min-height is what you are missing. Or rather, the issue you see comes from your usage of min-height on your wrapper. And I'm not sure if Firefox, per current spec, is correct (the paragraph in the latest spec is much more filled with ambiguity [1]). The space you see in WebKit / Opera is the margin-bottom on the p that contains 'Tagline'. In Gecko based browsers, that margin-bottom is contained within the min-height wrapper (it cannot escape). WebKit allows the margin to collapse through, creating the gap you see. [1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining. There is a longish thread on www-style on the subject, starting here: http://lists.w3.org/Archives/Public/www-style/2008Sep/0081.html http://wiki.csswg.org/spec/css2.1#issue-79 Philippe --- Philippe Wittenbergh http://l-c-n.com/ ARG! Thank you Philippe! -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Mystery space
Tom Livingston wrote: I am back with the same problem. David pointed out the issue, however I really don't understand WHY it's happening, and how to even things out. http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html Please see: http://www.chelseacreekstudio.com/ca/cssd/t.htm Philippe nailed it. ~d -- desktop 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/
[css-d] Mystery space
Hello list, Having an issue with Safari 4 Mac and a mystery space above the text Footer on this page: http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html Anyone see where it's coming from? It is not there in FF Mac. TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Mystery space
Tom Livingston wrote: Having an issue with Safari 4 Mac and a mystery space above the text Footer on this page: http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html I see no text footer at all : here is a screen capture, [suppressed for list] from Seamonkey 2.0.4 under Windows/XP SP3. Philip Taylor __ 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] Mystery space
Tom Livingston wrote:
Hello list,
Having an issue with Safari 4 Mac and a mystery space above the text
Footer on this page:
http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html
Anyone see where it's coming from? It is not there in FF Mac.
TIA
I guess its coming from the box-shadow padding and I may be wrong but
I'd assume Mac Safari/4.0.5 and the current WebKit nightly get it right?
#wrap{
/*min-height: 40em;
_height: 40em;*/
}
#footer{border-top: 1px solid fuchsia;}
#footer p {color: lime;}
aside
What's with position: relative; set on nearly everything...?
--
desktop
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] Mystery space
Having an issue with Safari 4 Mac and a mystery space above the text
Footer on this page:
http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html
I guess its coming from the box-shadow padding and I may be wrong but I'd
assume Mac Safari/4.0.5 and the current WebKit nightly get it right?
#wrap{
/*min-height: 40em;
_height: 40em;*/
}
#footer{border-top: 1px solid fuchsia;}
#footer p {color: lime;}
aside
What's with position: relative; set on nearly everything...?
Philip,
It's there. I see it in your screenie. The type was black. Sorry.
David,
Removing the min-height did cause both Safari and FF Mac to act the
same. Adding it caused Safari to lose any space between the footer and
wrap. Adding a margin-top to footer of 20px seems to cause both to
behave the same.
As far as many position: relative; being set, I have had a lot of
issues in the past that were solved simply by explicitly declaring
this, even though it is default, and in this case was the result of me
hunting for a solution to my problem.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Mystery space
aside What's with position: relative; set on nearly everything...? -- desktop http://chelseacreekstudio.com/ Actually, removing position: relative; from #leftCol and #rightCol caused the negative margin overhangs to the left and right to become clipped at the edge of #wrap in IE6. Adding them back fixed it. Small price to pay i think. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Mystery space
Tom Livingston wrote:
aside
What's with position: relative; set on nearly everything...?
--
desktop
http://chelseacreekstudio.com/
Actually, removing position: relative; from #leftCol and #rightCol
caused the negative margin overhangs to the left and right to become
clipped at the edge of #wrap in IE6. Adding them back fixed it. Small
price to pay i think.
That makes sense. Although, I wonder if this may make more sense (since
that garbage can is on death row)?
* html #leftCol,
* html #rightCol {
position: relative;
} /*for IE/6.0*/
Best,
~d
--
desktop
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] Mystery space
Change your footer style to:
#footer{width: 850px; margin: 0 auto 0 auto;}
#footer p{
color: #fff;
}
You had a margin of 20px and this should be zero.
hth
--- On Fri, 6/4/10, Tom Livingston tom...@gmail.com wrote:
Having an issue with Safari 4 Mac and a mystery space above
the text
Footer on this page:
http://proof.mlinc.com/mlinc.com/testpages/6-10/index.html
Anyone see where it's coming from? It is not there in FF
Mac.
__
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/
