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 <p>s, 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 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/ __________________________________________________________________ Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.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/
