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/
