On 26/07/2011 9:06 AM, John wrote:
On Jul 22, 2011, at 7:17 AM, Alan Gresley wrote:
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 */
}
Alan: if you don't mind, a few questions about this code? I've been
tinkering and entering what you supplied above a line at a time to get a
feel for what each bit does.
Why'd you go with width: 770px? I was thinking my smallest likely
monitor would be 1024, and if they had a larger monitor and could widen
that, THEN they'd see the lighter background to either side. Just
wondering if yours was an aesthetics decision or had some other
code-based reason?
No, I used the 770px because that was the width that was there and it
seem to be the same width that you had with the original layout here (I
had to search a bit to find the link to the page that this thread was
about).
http://www.coffeeonmars.com/page.html
You could use 1024px but if you do use pixels, you may have trouble with
overflowing content if a very large font-size is used by the user. You
could use min-width: 1024px. BTW, IE6 treats width as min-width due to
the expanding box bug so you CSS would have.
.livebar {
min-width:1024px;
}
* html .livebar {
width:1024px;
}
Also, the *html .livebar bit....that is IE-specific, I'm getting,
I should mention that it is '* html' (with whitespace) and not '*html'
(without whitespace). The former is a valid CSS selector which only
IE5~IE6/Win and IE5/Mac will use. The later in an invalid CSS selector
(there is no element *html) and IE7 will use it. IE7 doesn't need it
since overflow: auto triggers hasLayout.
but
how does one even know what to drop in there? I guess years of getting
knuckles scraped by Explorer? Or, is there a repository of such things?
That is why I added this CSS comment.
/* For IE6 since overflow: auto does not trigger hasLayout */
Since you have floated content, you need to declare on the parent
element a property/value that establishes a block formatting contexts
(BFC) [1] to enclose the floats. Since overflow: auto does not work, we
need to use another hasLayout trigger and sensibly one that will never
be used (a height of 1%). This is known as the Holly Hack (scroll down
to height).
http://www.satzansatz.de/cssd/onhavinglayout.html#prop
Thank you and the others for helping me on this problem. It's been a
huge education!
John
Your welcome.
[1]
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting
--
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/
