Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote: [...] Specifying a line-height will normalise things a little. . . While the #main div has line-height on all ps, you're right -- there was no line-height in the #left div. I just tried adding the same line-height, there, but it made no difference. IE gives a 2px bottom space to every li, while FF doesn't -- but, since the problem also occurs in other browsers, it's probably not because of that. In IE7, those extra two pixels of space below is due to the rendering of lucida glyphs with descenders with no text-decoration in list items. http://css-class.com/test/css/text/ie7-descenders-lucida.htm Notice the space below in IE7 with the last list item. In FF, Opera and IE8, the descenders are touching the bottom edge of the list item. Safari is just different completely (another story). The behavior in IE7 is different if a paragraph is used where the descenders appear below the underline of the link. See second paragraph. No line-height, font-size will do much to change the behavior of IE7. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote: Several weeks ago, I sought and received some help from this list re. my www.thinkingmusic.ca website. While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. Michael, I believe Georg and Philippe have answered your questions, and Georg has provided several online working solutions. Consequently, you are good to go, and should be able to meet your pending advertising deadline without issue. Since you and I have discussed a totally different approach, and more particularly because I really like your visual concept, I took a crack at a float version-- no absolute positioning is used. No hacks needed, thus far anyway. Cursory checked in IE 6/7/8 and Mac browsers. Any amount of content, whether short or longs, should work alright. Keep it in your war chest, if you like, if for no other reason than to compare a float vs absolute positioned structure for your visual. http://chelseacreekstudio.com/ca/cssd/ml-visual/ Good luck and best, ~d __ 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] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote: Hi, David; Keep it in your war chest, if you like, if for no other reason than to compare a float vs absolute positioned structure for your visual. http://chelseacreekstudio.com/ca/cssd/ml-visual/ Thank-you very much! I will definitely use it as a way to study float-based design!!! Perhaps, when/if the smoke clears and I've had time to study floats via your page, I may very well replace my current approach with it. Forgive my ignorance -- this is a real beginner's question! -- but is there any better way of my saving your http://chelseacreekstudio.com/ca/cssd/ml-visual/ than by simply viewing and then copying the source code? - Michael You are very welcome. I will send an archive to you as an attachment off-list in a few minutes. Otherwise to download: OperaFile Save AsHTML with images FirefoxFilePick the appropriate method to suit your need. __ 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] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote: www.thinkingmusic.ca/analyses I have used a copy of this page to exemplify one approach to solving your problems... http://www.gunlaug.no/tos/alien/ml/test_09_0511.html http://www.gunlaug.no/tos/alien/ml/test_09_0511_files/styles00.css Are these differences the result of my own errors, or normal browser behaviour? Both :-) Browsers behave this way given the styles you have provided. You can not calculate the right length (height) of an element in relation to another, unless one is a child of the other. If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? CSS standards, and some workarounds for very old browsers, let you make the sidebar (#left) end up exactly in line with the main column. The easiest way to achieve this is to leave #main un-positioned (static), so it can affect the height of main div (#top) directly. Then the sidebar (left) can be absolute positioned relative to bottom of main div (#top) for perfect alignment. Resize (text) all you want in any somewhat standard compliant browser, and it'll keep the bottom alignment. IE6 can't position opposite edges of elements relative to parents, so I've added a workaround (dynamic expression) for it. I've also modified how those ul in the sidebar are positioned. Note that there's no way you can space those ul evenly down the sidebar in a way that will look alright for any page-length and amount of content and degree of font-resizing in the main column. You'll have to compromise. Design wise I agree with Philippe: a jagged line-up at the bottom will look better then a straight line. You can achieve a straight line or a jagged alignment as you wish with the method I've exemplified, and the chosen alignment will remain stable. regards Georg -- http://www.gunlaug.no __ 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] Getting absolutely positioned divs with bottom: auto to end together
From: Gunlaug Sørtun gunla...@c2i.net To: Michael Leibson michael_mabe...@yahoo.ca Cc: css-d@lists.css-discuss.org Sent: Monday, May 11, 2009 5:56:02 AM Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together www.thinkingmusic.ca/analyses I have used a copy of this page to exemplify one approach to solving your problems . . . . . The easiest way to achieve this is to leave #main un-positioned (static), so it can affect the height of main div (#top) directly. Then the sidebar (left) can be absolute positioned relative to bottom of main div (#top) for perfect alignment. Georg, I'm picking my jaw up from the floor, after it dropped in utter amazement at your solution! ; - ) You guys aren't 'mere web developers' -- you're mathematicians! I'm blown away. I'll get back to you after I've had a chance to re-gather my mind, and have tried to follow the principles involved in your solution. (Wow!) - Michael __ The new Internet Explorer® 8 - Faster, safer, easier. Optimized for Yahoo! Get it Now for Free! at http://downloads.yahoo.com/ca/internetexplorer/ __ 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] Getting absolutely positioned divs with bottom: auto to end together
Thanks for your generous feedback, Philippe! Some follow-up questions, below. . . To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: Specifying a line-height will normalise things a little. . . While the #main div has line-height on all ps, you're right -- there was no line-height in the #left div. I just tried adding the same line-height, there, but it made no difference. IE gives a 2px bottom space to every li, while FF doesn't -- but, since the problem also occurs in other browsers, it's probably not because of that. Google 'faux columns', or try one of the following techniques: I read Dan Cederholm's article (http://www.alistapart.com/articles/fauxcolumns/), but I'm not 100% sure I get it: in my situation, I already have a repeating background image on my body element, but it must tile horizontally, not vertically, because the top third of my viewport has a white body background, and the rest has a dark slate background. Am I misunderstanding how the fauxcolumns would work? http://www.positioniseverything.net/articles/onetruelayout/ I see that, since its invention, many bugs have rendered this technique almost impossible (http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems). http://www.satzansatz.de/cssd/companions.html While I think I get the concept (and it's very neat!), the technical side of this one is way beyond my current level. Personally, I'd go with a 'ragged end-of-page' by design :-) Do you mean to just let the divs end wherever they may, and forget about the aesthetic consequences -- or to come up with a design in which such a consequence will be in keeping with an important design motif? Thanks again, Philippe! All the best, Michael 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Text zoom or page zoom ? With page zoom, there is little difference. With text-zoom, the columns will on grow based on the text content. The margins in your left column will not change the same way, as they are specified in pixels. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Google 'faux columns', or try one of the following techniques: http://www.positioniseverything.net/articles/onetruelayout/ http://www.satzansatz.de/cssd/companions.html Personally, I'd go with a 'ragged end-of-page' by design :-) PS - the little images in your #left column contain a colour profile. This causes a (severe) colour mismatch in browsers that support colour management for images (Safari, Firefox 3.5b). The embedded colour profile is the one coming from Photoshop when saving for web. I use pngcrush to strip it out. Philippe --- Philippe Wittenbergh http://l-c-n.com/ The total height of those 2 columns will also depend on the line-height, and how browsers interpret the 'normal' keyword - you don't specify any line-height as far as I a can tell. Specifying a line-height will normalise things a little, but you might still be at the mercy of differences in rounding of values to the nearest pixel between browsers. I've got line-height: 135% on all the p text in the #main div, but none on the elements in the #left div. I just tried adding the same line-height, there, but it made no difference to the ragged-end-of-page problem. In order to see what may be happening, I gave all the #left elements borders, and saw that IE gives a 2px bottom space to every li, while FF doesn't. However, since the problem also occurs in other browsers, I don't want to begin applying hacks unless I know what I'm doing. From: Philippe Wittenbergh e...@l-c-n.com To: CSS-D css-d@lists.css-discuss.org Cc: Michael Leibson michael_mabe...@yahoo.ca Sent: Sunday, May 10, 2009 10:49:57 PM Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together On May 11, 2009, at 11:17 AM, Michael Leibson wrote: ... While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather than by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all
Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote:
www.thinkingmusic.ca/analyses
You guys aren't 'mere web developers' -- you're mathematicians!
:-)
When dealing with browsers that's definitely an advantage.
Apart from that; when one has created and modified a few thousand
layouts, the only problem is which solution(s) to choose amongst the
many one knows will work for the case at hand.
To use the same page for more examples - different ways to achieve the
same thing, here are two identically-looking pages...
http://www.gunlaug.no/tos/alien/ml/test_09_0511-a.html
http://www.gunlaug.no/tos/alien/ml/test_09_0511-b.html
These two have the left sidebar absolute positioned from inside an
absolute positioned main column, which mean I've gone back to your
absolute positioning method but rearranged the markup ever so slightly
but modified it slightly to make it work as you wanted.
test_09_0511-a has the sidebar above the main content in the markup -
like your original page, while test_09_0511-b has the sidebar below
the main content. As you can see the source-order can be modified to
either main content first or main content last, based on the exact same
stylesheet with the exact same absolute positioning...
http://www.gunlaug.no/tos/alien/ml/test_09_0511_files/styles01.css
Now, note that this method only works well when the main column is at
least tall enough to stretch the sidebar to a reasonable height. To
short a main column will make the sidebar look crammed, so you may have
to add a suitable min-height to #main if you don't have enough content.
I've used #main {min-height: 1200px;} which has no effect on the
examples since the amount of content pushes it taller, but the optimal
value depends on how much you want to put into the left sidebar.
I added in a jagged bottom-edge just to show what we mean by that.
By applying #left {bottom: 10px;} I'd mad sure the sidebar will always
be 10px shorter than the main column, regardless of how tall the main
column is or ends up being when you resize text. I think it looks better
this way.
To give you a bit more to build on; read this ALA article...
http://www.alistapart.com/articles/conflictingabsolutepositions/
Also; for the examples above I used my own IE-expression to make IE6
play ball...
http://www.gunlaug.no/contents/wd_additions_22.html
regards
Georg
--
http://www.gunlaug.no
__
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] Getting absolutely positioned divs with bottom: auto to end together
Hi; Several weeks ago, I sought and received some help from this list re. my www.thinkingmusic.ca website. While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather than by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: 1) Firefox, Safari, Opera and IE each interprets the measurements between successive link-containing ul’s (within the page’s #left div) differently, which means that that div only concludes at the same point as its neighbouring div in Firefox (within which I designed the page), and no other browser. Instead of all divs ending at the same place at the bottom of the page, I get a ragged end-of-page. 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Thanks, in advance, for any light you can shed on this. Michael __ Connect with friends from any web browser - no download required. Try the new Yahoo! Canada Messenger for the Web BETA at http://ca.messenger.yahoo.com/webmessengerpromo.php __ 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] Getting absolutely positioned divs with bottom: auto to end together
On May 11, 2009, at 11:17 AM, Michael Leibson wrote: ... While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather than by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: 1) Firefox, Safari, Opera and IE each interprets the measurements between successive link- containing ul’s (within the page’s #left div) differently, which means that that div only concludes at the same point as its neighbouring div in Firefox (within which I designed the page), and no other browser. Instead of all divs ending at the same place at the bottom of the page, I get a ragged end-of-page. If it helps, On my Mac, Firefox 3 and 3.5b4, Safari 4b, Opera 10b all display a 'ragged end-of-page'. Safari and Firefox display the same, in Opera 10 the difference in height is less pronounced. The total height of those 2 columns will also depend on the line- height, and how browsers interpret the 'normal' keyword - you don't specify any line-height as far as I a can tell. Specifying a line-height will normalise things a little, but you might still be at the mercy of differences in rounding of values to the nearest pixel between browsers. 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Text zoom or page zoom ? With page zoom, there is little difference. With text-zoom, the columns will on grow based on the text content. The margins in your left column will not change the same way, as they are specified in pixels. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Google 'faux columns', or try one of the following techniques: http://www.positioniseverything.net/articles/onetruelayout/ http://www.satzansatz.de/cssd/companions.html Personally, I'd go with a 'ragged end-of-page' by design :-) PS - the little images in your #left column contain a colour profile. This causes a (severe) colour mismatch in browsers that support colour management for images (Safari, Firefox 3.5b). The embedded colour profile is the one coming from Photoshop when saving for web. I use pngcrush to strip it out. 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] Getting absolutely positioned divs with bottom: auto to end together
Inserts fuuny joke about tables here. I've actually more and more been considering transparent pngs instead of tables. I figure. If I call the image. Strictly_valid_css3.png it will be fine heh sorry I thought u could us a little joke this makes me depressed. I did something similar with scripting js and 200 lines of code. My mockup used a table. And was 12 lines. And was more valid. I think after 10,000 lines of hacks I'm going to stop pretending that many times the fasest and clean, valid code involves a table with CSS. I really feel like our whole community has been told that it's evil. So we write another 10,000 lines and 12 specific browser sheets instead of using the one Valid element support by browsers and rendered faster than othe tags. I'm nnot saying my lAyouts will be full of tables but I've decide to stop being proud of the fact and tellin clients if course it's tableless!!! And instead start telling them he yes I used a table with css and a table center works. I guess I'm just all wondering how many hours and years of our lives we spent at a computer screen. I know in 20 years the do everything with css is going to bother me. Wasted life and for what? If tables fit a situation we should use them. Am I crazy for saying this here? I want a revolution! A group of rebels who use tables responsibly, Daring to say 200 lines and hours when a situation requires it. We're all getting to old for this. I'm sorry for this but what do other people feel. I was up last night a 4am enjoying the css hacking. And then I looked over at my sleeping wife and realized. I could have done the hack with a table... It made me think maybe we like the challege if that's the case we better hope IE always sucks and web standards are allways messy. Otherwise we might just end up being UI artists instead of magic wizards with power. Happy Mothers day ! Cheers! Sent from my iPhon On May 10, 2009, at 8:49 PM, Philippe Wittenbergh e...@l-c-n.com wrote: On May 11, 2009, at 11:17 AM, Michael Leibson wrote: ... While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather t han by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: 1) Firefox, Safari, Opera and IE each interprets the measurements between successive link- containing ul’s (within the page’s #left div) differently, which means that that div only concludes at the same point as its neighbouring div in Firefox (within which I designed the page), and no other browser. Instead of all divs ending at the same place at the bottom of the page, I get a ragged end-of-page. If it helps, On my Mac, Firefox 3 and 3.5b4, Safari 4b, Opera 10b all display a 'ragged end-of-page'. Safari and Firefox display the same, in Opera 10 the difference in height is less pronounced. The total height of those 2 columns will also depend on the line- height, and how browsers interpret the 'normal' keyword - you don't specify any line-height as far as I a can tell. Specifying a line-height will normalise things a little, but you might still be at the mercy of differences in rounding of values to the nearest pixel between browsers. 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Text zoom or page zoom ? With page zoom, there is little difference. With text-zoom, the columns will on grow based on the text content. The margins in your left column will not change the same way, as they are specified in pixels. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Google 'faux columns', or try one of the following techniques: http://www.positioniseverything.net/articles/onetruelayout/ http://www.satzansatz.de/cssd/companions.html Personally, I'd go with a 'ragged end-of-page' by design :-) PS - the little images in your #left column contain a colour profile. This causes a (severe) colour mismatch in browsers that support colour management for images (Safari, Firefox 3.5b). The embedded colour profile is the one coming
