Re: [css-d] float-setup with mysterious top-margin...
On 6 Feb 2006, at 3:49 pm, Jesper Brunholm wrote:
I've reopened a page with the setup on
http://www.triomio.dk/testsetup.html, and I am struggling to see how
this can be collapsing margins. As far as I can gather, the
contributing
factors are (all declared in
http://www.triomio.dk/script/oldstyle.css, only relevant style is
quoted below)
[...]
below that, the graphical element:
#sgraf {
border-top: 4px solid #c08e09;
width: 300px;
height: 400px;
clear: left;
float: left;
margin-bottom: 2em;
}
[]
I think that it is the clear:left; of #sgraf that is still clearing
when we get to the floated content. Actually, reconsidering, I think
that it _should_ do so (considering the rules). I was fooled by
Explorer's neat behaviour, and did not look far enough back into
my setup.
Can you confirm this, or show me the margin-collapse :-) ?
No margin-collapsing issues to be seen there :-)
here is the same file as a minimal sample (probably won't work in IE).
http://dev.l-c-n.com/_temp/trioMio.php
You are right when you isolate the 'clear:left' in #sgraf as the
problem.
Better you are to float the whole left-hand column:
http://dev.l-c-n.com/_temp/trioMio2.php
If that is what you actually want...
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
__
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] float-setup with mysterious top-margin...
I've reopened a page with the setup on http://www.triomio.dk/testsetup.html [...] I think that it is the clear:left; of #sgraf that is still clearing when we get to the floated content. [...] Can you confirm this, or show me the margin-collapse :-) ? No margin-collapsing issues to be seen there :-) Thanks - then I probably haven't missed the collapsing-margins concept :-) Better you are to float the whole left-hand column: http://dev.l-c-n.com/_temp/trioMio2.php If that is what you actually want... That's the solution I ended up using, see http://triomio.dk/index_e.html for an english version - do I interpret your anwer right, that you see a problem in this set up? Thank you again Best regards Jesper Brunholm __ 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] float-setup with mysterious top-margin...
Jesper Brunholm wrote: http://www.triomio.dk/testsetup.html I think that it is the clear:left; of #sgraf that is still clearing when we get to the floated content. Can you confirm this, or show me the margin-collapse :-) ? You're quite right - no margin-collapse there. It's obvious when I see the original case. Missed it the first time around :-) Your solution in http://www.triomio.dk/index_e.html is the right one for such a clearing-case. 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] float-setup with mysterious top-margin...
Jesper Brunholm skrev: I'm afraid that this is something simple, that I've gone blind on... On http://www.triomio.dk/index_e.html (and several more pages on the site with floated content) the content-floats to the right (the CD-cover) has a mysterious margin-top, levelling it with the bottom of the menu-box on it's left side, in Firefox 1.501 and Opera 8 :-( I have found a solution: to have en left-column content in one floated box instead of the previous two. Thank you for all interest shown :-) Best regards Jesper Brunholm __ 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] float-setup with mysterious top-margin...
Jesper Brunholm wrote: On http://www.triomio.dk/index_e.html (and several more pages on the site with floated content) the content-floats to the right (the CD-cover) has a mysterious margin-top, levelling it with the bottom of the menu-box on it's left side, in Firefox 1.501 and Opera 8 :-( I have found a solution: to have en left-column content in one floated box instead of the previous two. Thank you for all interest shown :-) Too late now :-) but it sounds like a case of 'collapsing margins'[1]. It often is when Explorer get it right. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- 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] float-setup with mysterious top-margin...
Gunlaug Sørtun skrev:
On http://www.triomio.dk/index_e.html (and several more pages on
the site with floated content) the content-floats to the right (the
CD-cover) has a mysterious margin-top, levelling it with the
bottom of the menu-box on it's left side, in Firefox 1.501 and
Opera 8 :-(
Too late now :-) but it sounds like a case of 'collapsing margins'[1].
It often is when Explorer get it right.
I've reopened a page with the setup on
http://www.triomio.dk/testsetup.html, and I am struggling to see how
this can be collapsing margins. As far as I can gather, the contributing
factors are (all declared in
http://www.triomio.dk/script/oldstyle.css, only relevant style is
quoted below)
The #menu box to the left (the one with positioned menu links in it):
#menu {
width: 300px;
height: 150px;
margin-left: 0px;
margin-right: 1px;
margin-top: 5px;
position: relative;
float: left;
}
below that, the graphical element:
#sgraf {
border-top: 4px solid #c08e09;
width: 300px;
height: 400px;
clear: left;
float: left;
margin-bottom: 2em;
}
then I have #indhold (big container with everything to the right of the
menu in it)
#indhold {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 40px;
padding-left: 310px;
padding-right: 1.2em;
padding-top: 0;
}
and finally the contend is floated with inline style
div style=width: 365px; float: left; margin-top: 0;
I think that it is the clear:left; of #sgraf that is still clearing
when we get to the floated content. Actually, reconsidering, I think
that it _should_ do so (considering the rules). I was fooled by
Explorer's neat behaviour, and did not look far enough back into my setup.
Can you confirm this, or show me the margin-collapse :-) ?
Thanks again, best regards
Jesper Brunholm
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
__
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] float-setup with mysterious top-margin...
Hi folks I'm afraid that this is something simple, that I've gone blind on... On http://www.triomio.dk/index_e.html (and several more pages on the site with floated content) the content-floats to the right (the CD-cover) has a mysterious margin-top, levelling it with the bottom of the menu-box on it's left side, in Firefox 1.501 and Opera 8 :-( If I de-float it, I get it in place at the top, but then I can't get the neat effect of the right-col box that stays to the right _as long as there's screen width enough_. I hope that I've overlooked something simple, and you can help me :-) Oh - and - as much as I hate to say this - Explorer actually shows what i want and expect. Kind regards Jesper Brunholm __ 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/
