Re: [css-d] Layout check please- was Table squirting out of DIV
I just wanted to say thanks for the help and patient explanations. CSS is a very complicated subject and hopefully someday I will be able to help others as you have helped me. =] Rolland __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout check please- was Table squirting out of DIV
Hi Gunlaug, thanks for the explanation. After reading the ALA
article on negative margins I think I understand the reason for the
LayoutGala #wrapper around #content and why I don't need it. My
source order has the #sidenav before the content and it isn't
floatedso the css ends up being much simpler and there is no need
for the #wrapper. I think the main point I have missed in the past
is, margins (and thus, negative margins) are handled differently for
floated and inline elements than they are for non-floated block-level
elements.more news to me and possiblly the missing link to my
misunderstandings. Now I just have to find info on 'why how' they
are handled differently. Thanks againand I'll be back! hehe...
==
rollandburn wrote:
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
Try to think of it like this:
1: div#wrapper will show up as a 100% wide float-container, but will
/only take up space/ equivalent to '100% minus 200px' (regardless of how
much that is).
That leaves 200px empty space on the left side.
2: div#content will stay 200px away from the left edge of div#wrapper,
so it won't cover up the empty space on the left side.
Result: there's 200px empty space for 'navigation' and 'more stuff here'
to stay in.
Method with 'negative margins' on floats is best described here...
http://www.alistapart.com/articles/negativemargins/
and your LayoutGala example is just a variation.
This example on my site is a bit overdone...
http://www.gunlaug.no/contents/wd_demo_float_03.html
but the entire page-layout and the 'removed floats' rely entirely on
the same 'negative margins' method as described in the ALA article. A
useful bit of standard float-behavior.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout check please- was Table squirting out of DIV
Hi again and thanks Gunlaug. I don't feel so inept when the solution
is something I wouldn't have thought of in a million years...hehe.
Both of your suggestions worked perfectly to fix the footer width and
gecko 1px line problems. And you are correct, my test page did not
validate but it should now validate as html 4.01 strict.
The fact that IE doesn't understand XHTML is news to me and makes me
wonder if why I've been using XHTML all this time. (embarassment =
[) I think I may have made a mistake saying, only used by IE on
pc's in North America I should have just left it at, should
support firefox and ie on mac and pc. Sorry for the confusion.
The LayoutGala page with the margins that seemed to cancel each other
out still confuses me. The html has a #wrapper directly around only
the #content. My confusion comes from not knowing why this example
needs to shove the #wrapper to the left, then push the #content back
to the right the same amount. What problem does the #wrapper solve
that makes its use necessary?
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div id=wrapper
div id=content
...
/div
/div
Thanks!!!
=
Your test page isn't XHTML 1.0, so you should clean it up first, or
change it to HTML 4.01 and mark it up accordingly.
http://validator.w3.org/check?uri=http://rollandburn.com/index.html
Don't know how your original page is, but the same standard-requirements
should be applied to that too. No IE-version understand XHTML anyway, so
you may as well change it since IE-only is one of _your_ requirements.
Having written that: it shouldn't be much of a problem to clean it up
and turn it into proper XHTML, that survives if served as
'application/xhtml+xml' if _that_ is a requirement (it is according to
W3C). I just did, and all standard-compliant browsers rendered it
perfectly, but IE/win will of course not play ball. Maybe IE8 will :-)
--
When scrolling to the right in IE/PC, I notice the footer doesn't
stretch along 'x' plane all the way when the table is really wide
IE/win lose track of how wide the page really is, and limits the
footer-width to the window-width. It is sometimes a tricky one.
Here is a future-safe hack for IE6 and older versions, which must be
placed - completely with @media rule and all - after all other styles.
Will make IE6 behave - or appear as if it does.
@media screen {
* html #footer {
float: left;
width: 5000%;
margin-right: -4999%;
}
}
I have no idea how IE7 renders that footer, but it won't be disturbed by
the above hack. Neither will any other browser.
In Firefox PC and Mac i notice at the bottom of the footer a baby
blue 1px horizontal line where the background image shows through. It
comes and goes with keyboard font resizing.
The overprecise calculation in Gecko tends to hit and miss a bit.
The simplest cover-up in your case is to pull up the bottom margin on
the footer.
#footer {margin-bottom: -1px)
...should do.
-
Regarding margins seem to cancel themselves out..., is not so.
The #content {margin-left:12em} is positioning that container so far
from the left edge of #container to make space for navigation. If you
don't need navigation, then you simply change that margin to zero.
Example:
body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:12em;}
...or something like that.
I don't know how many eventualities you have to cover with this layout,
so I can't say if this layout CSS has all the bases covered or not.
Given proper (and clean) markup I can't see any problems with it in any
of my browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout check please- was Table squirting out of DIV
rollandburn wrote:
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
Try to think of it like this:
1: div#wrapper will show up as a 100% wide float-container, but will
/only take up space/ equivalent to '100% minus 200px' (regardless of how
much that is).
That leaves 200px empty space on the left side.
2: div#content will stay 200px away from the left edge of div#wrapper,
so it won't cover up the empty space on the left side.
Result: there's 200px empty space for 'navigation' and 'more stuff here'
to stay in.
Method with 'negative margins' on floats is best described here...
http://www.alistapart.com/articles/negativemargins/
...and your LayoutGala example is just a variation.
This example on my site is a bit overdone...
http://www.gunlaug.no/contents/wd_demo_float_03.html
...but the entire page-layout and the 'removed floats' rely entirely on
the same 'negative margins' method as described in the ALA article. A
useful bit of standard float-behavior.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout check please- was Table squirting out of DIV
sorry if this is posted twice.. Hi again, This began as [css-d] Table squirting out of DIV but Zoe helped me fix that so I thought I'd start a new thread for some of my other questions. Below is a url for referencethe original page I'm working on is secured and isn't accessible to the public. I tried to include as much information as possible for anyone feeling kind enough to help. I am using http://blog.html.it/layoutgala/LayoutGala24.html as a starting point for reference. http://rollandburn.com/index.html Thanks! Hi everyone, thank-you Zoe for the suggestion to use display: table- cell to sort out my squir..ahem, overflow problems. Unfortunately this nullifies the margins I have applied to the div that are necessary for layout. Applying padding to compensate won't work in this situation because of background colour issues. This is starting to give me a cramp. I didn't realize how much stress is involved with trying to wrap your head around every nuance of css, browser differences, accessibility, usability, appearance, and code efficiency all at the same time. Talk about overwhelming. I'm not going to revert to using tables and I don't know why. =] rollandburn wrote: I wonder if someone could slap me with some knowledge and tell if there is a way to keep a table from squirting Eww... please use the word overflow, as that's the CSS term for it and way less gross than the word squirt. I shiver just thinking about it... :-) outside its containing div when the browser window is resized smaller. Or, How do you get a div to only shrink to the size of its contents (upon window resize) and not further? Set it to display: table-cell, which makes it act like a table cell in that it will expand to fit its contents. IE doesn't understand this, but IE expands to fit anyway (not sure about IE7, though, which still will not support the table display values). You can also simulate expanding to fit by messing with negative margins. I've written a few articles on this over at CMX: http://www.communitymx.com/abstract.cfm?cid=B0029 Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout check please- was Table squirting out of DIV
http://rollandburn.com/index.html
Your test page isn't XHTML 1.0, so you should clean it up first, or
change it to HTML 4.01 and mark it up accordingly.
http://validator.w3.org/check?uri=http://rollandburn.com/index.html
Don't know how your original page is, but the same standard-requirements
should be applied to that too. No IE-version understand XHTML anyway, so
you may as well change it since IE-only is one of _your_ requirements.
Having written that: it shouldn't be much of a problem to clean it up
and turn it into proper XHTML, that survives if served as
'application/xhtml+xml' if _that_ is a requirement (it is according to
W3C). I just did, and all standard-compliant browsers rendered it
perfectly, but IE/win will of course not play ball. Maybe IE8 will :-)
--
When scrolling to the right in IE/PC, I notice the footer doesn't
stretch along 'x' plane all the way when the table is really wide
IE/win lose track of how wide the page really is, and limits the
footer-width to the window-width. It is sometimes a tricky one.
Here is a future-safe hack for IE6 and older versions, which must be
placed - completely with @media rule and all - after all other styles.
Will make IE6 behave - or appear as if it does.
@media screen {
* html #footer {
float: left;
width: 5000%;
margin-right: -4999%;
}
}
I have no idea how IE7 renders that footer, but it won't be disturbed by
the above hack. Neither will any other browser.
In Firefox PC and Mac i notice at the bottom of the footer a baby
blue 1px horizontal line where the background image shows through. It
comes and goes with keyboard font resizing.
The overprecise calculation in Gecko tends to hit and miss a bit.
The simplest cover-up in your case is to pull up the bottom margin on
the footer.
#footer {margin-bottom: -1px)
...should do.
-
Regarding margins seem to cancel themselves out..., is not so.
The #content {margin-left:12em} is positioning that container so far
from the left edge of #container to make space for navigation. If you
don't need navigation, then you simply change that margin to zero.
Example:
body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:12em;}
...or something like that.
I don't know how many eventualities you have to cover with this layout,
so I can't say if this layout CSS has all the bases covered or not.
Given proper (and clean) markup I can't see any problems with it in any
of my browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout check please- was Table squirting out of DIV
Gunlaug Sørtun wrote:
http://rollandburn.com/index.html
Correction (of course) :-)
[...] If you don't need navigation, then you simply change that
margin to zero.
Example:
body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:0;}
...is more like it, I think.
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
