Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together

2009-05-12 Thread Alan Gresley
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

2009-05-12 Thread David Laakso
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

2009-05-12 Thread David Laakso
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

2009-05-11 Thread Gunlaug Sørtun
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

2009-05-11 Thread Michael Leibson






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

2009-05-11 Thread Michael Leibson
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

2009-05-11 Thread Gunlaug Sørtun
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

2009-05-10 Thread Michael Leibson
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

2009-05-10 Thread Philippe Wittenbergh

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

2009-05-10 Thread Court Kizer
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