Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-06 Thread Rob O'Rourke

Tee G. Peng wrote:




Seems odd that resizing the font would affect the bottom margins. Do 
you have a demo or screenshot? I'll have a go at getting it to work 
myself but I think that the table-layout method would be best for 
forward compatibility. Keep us posted.




Rob, was experimenting different methods and I must say, using Georg's 
method for advanced browsers and height with EM [1] for IE works 
appear to be  the best for my situation (still need refinement for the 
two buggers though!)


I am posting the results for different approaches I have tried.


This page is set the height with EM (no content wrapper) for all 
browsers that you want to see. The height shrink or expand depending 
on the font size increases /decreases. I thought this is the normal 
behavior for EM value, not quite understand why you said it shouldn't.

http://project.lotusseedsdesign.com/SH-new/with_height.html


I meant that I don't know why there would be an undesirable amount of 
space at the bottom. I've put together a quick example to demonstrate my 
idea, works in FF, IE6 and Opera. I've placed CSS background-colours on 
the blocks to avoid that white background showing through and a div at 
the top with the darker background-colour set in the CSS too.


http://www.sanchothefat.com/dev/list-help/tgp.htm

That's the kind of thing I was getting at, I'm afraid I don't have time 
to play with the display: table stuff right now, good luck with it!




Finally comes the one with Georg' method
http://project.lotusseedsdesign.com/SH-new/georg_method.html

in IE 6, the background images for each block are gone, I think it's 
caused by (overflow:hidden), whereas in IE 7, the vertical scrolling 
still exist  (with overflow:hidden), and the background images are 
pushed to the very bottom of the page. Georg, please help!




Are they pushed to the bottom even when the background-position is set 
to top?


Take it easy,
Rob O



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-06 Thread Gunlaug Sørtun

Tee G. Peng wrote:

http://project.lotusseedsdesign.com/SH-new/georg_method.html



My mistake, placing the overflow:hidden in content' does work for IE
 7, but I still can't figure why the background images  are not 
showing up.


Quite simple, really: they are positioned 3px too low because of the
large padding, and remains hidden down there.

There's no way around that one. You'll have to position the
background-images relative to 'top left' - at least in IE, and just make
it look (somewhat) right.



Another minor addition for IE...

.tabs {height: 1%;}

...as a 'hasLayout' trigger to make those elements expand properly.

regards
Georg
--
http://www.gunlaug.no



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-05 Thread Gunlaug Sørtun

Tee G. Peng wrote:


Example: http://www.gunlaug.no/tos/moa_11.html


Yeah, Al is right. I see the endless vertical scrolling from IE7. Got  
fix for IE7 -:)


Yes, I think so, but I can't check it since I don't have IE7 installed.

IE7 is reported to react well for similar layouts if the overflow is 
simply hidden, so it shouldn't be too hard to fix that new bugger.

Place 'overflow: hidden' on '.row' I think.

Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-05 Thread Tee G. Peng


On Nov 5, 2006, at 10:45 AM, Rob O'Rourke wrote:


Rob, I am playing with your suggestion this moment. Setting height  
in EM seemed a very good approach, even for rows  that have  
different lenght of contents. When I tried enlarge the font size  
in Firefox and Safari, it however gives an undesirable space at  
the bottom of each row, the same goes to deduce the font size.


I am thinking, perhaps it's best to combine yours and Georg'  
suggestion, using table-row and table-cell for display element for  
advance browsers,  then feeds IE 6 and 7 the height with EM,. IE 7  
has zoom feature like Opera, this maybe a more sensible approach?


Seems odd that resizing the font would affect the bottom margins.  
Do you have a demo or screenshot? I'll have a go at getting it to  
work myself but I think that the table-layout method would be best  
for forward compatibility. Keep us posted.




Rob, was experimenting different methods and I must say, using  
Georg's method for advanced browsers and height with EM [1] for IE  
works appear to be  the best for my situation (still need refinement  
for the two buggers though!)


I am posting the results for different approaches I have tried.

[1] Better result for all browsers.
http://project.lotusseedsdesign.com/SH-new/home_logoff.html

but with the same page, Safari doesn't like it very much. It places  
the header at the bottom, below the display table-row's elements [2].
see screen shot here: http://project.lotusseedsdesign.com/SH-new/ 
safari.png


The 'display: table-row' is declared in the 'div.content'. With each  
row, the two columns (.left_col and .right_col) have to be wrapped  
inside the 'content' or it runs across the browser horizontally. The  
markup is such:


div class=content
div class=left_colpopular bookmarks/div
div class=right_colpopular people/div
/div

div class=content
div class=left_colpopular sites/div
div class=right_colpopular tags/div
/div

[2] Further testing shows a very bizarre behaviors that somehow fixes  
Safari's problem, by accident -  I changed the 'content' from class  
to ID in my stylesheet, but forgetting to change it to id in the markup.

[2] http://project.lotusseedsdesign.com/SH-new/safari_fix.html

screen shot for the same page for PC users to get an idea.
http://project.lotusseedsdesign.com/SH-new/safari_fix.png
It works fine for all browsers. And you can see I change the  
'div.content' to '#content' in common.css file, and have kept the  
div class=content in the markup.


While trying to figure out the above problem for Safari, I went back  
to study' Georg's code, and realized I didn't have a 'display: table'  
for the outer wrapper. From the above working page, it appears that  
no 'display:table' makes no difference to browser at all, however I  
wanted to find out if that is the reason resulting Safari behavior;   
Georg has the declaration in 'equal' class which is the wrapper for  
all contents in his example. I don't want the 'display: table'  
declare in the #container (the outer wrapper for my page), so I added  
a new id (#wrapper)


#wrapper {display:table}

div id=wrapper
div class=content
div class=left_colpopular bookmarks/div
div class=right_colpopular people/div
/div

div class=content
div class=left_colpopular sites/div
div class=right_colpopular tags/div
/div

/div

And yes, it confirms that adding a wrapper with display table does  
the trick for Safari,

http://project.lotusseedsdesign.com/SH-new/add_wrapper.html

but so as the [2] did the trick. So I am guessing just the 'display:  
table-cell' for left_col and right_col is all it needed (?) because  
without changing the div class=content to div id=content for  
[2], the div class=content tag has no meaning to browsers and it  
appears the 'display: table-cell' from left/right columns are holding  
everything together. Still, one mystery needs to be solve: if I  
removed the two div class=content tags from [2], the page breaks  
even worse in Safari, columns and rows run vertically to the left,  
and placing the header section in the middle of the page. (it appears  
this browser is full of bugs now - I encounter more problem from it  
than the IE lately)

http://project.lotusseedsdesign.com/SH-new/no_contentwrap.html
http://project.lotusseedsdesign.com/safari_2.png

No solution, no conclusion  I am afraid. Anyone here studies Safari'  
behavior? Is Patrick the man?!


This page is set the height with EM (no content wrapper) for all  
browsers that you want to see. The height shrink or expand depending  
on the font size increases /decreases. I thought this is the normal  
behavior for EM value, not quite understand why you said it shouldn't.


Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-05 Thread Tee G. Peng


On Nov 5, 2006, at 6:17 PM, Tee G. Peng wrote:




I am posting the results for different approaches I have tried.


I deleted all images, footer and header as I really shouldn't show  
the page to public without asking permission from client first  
(although no NDA is signed for this project). Hope by removing the  
images I remove the trace of evidences :)


tee 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-05 Thread Tee G. Peng


On Nov 5, 2006, at 6:17 PM, Tee G. Peng wrote:

Finally comes the one with Georg' method
http://project.lotusseedsdesign.com/SH-new/georg_method.html

in IE 6, the background images for each block are gone, I think  
it's caused by (overflow:hidden), whereas in IE 7, the vertical  
scrolling still exist  (with overflow:hidden), and the background  
images are pushed to the very bottom of the page. Georg, please help!




My mistake, placing the overflow:hidden in content' does work for IE  
7, but I still can't figure why the background images  are not  
showing up.


tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-05 Thread Gunlaug Sørtun

Tee G. Peng wrote:

http://project.lotusseedsdesign.com/SH-new/georg_method.html



My mistake, placing the overflow:hidden in content' does work for IE
 7, but I still can't figure why the background images  are not 
showing up.


Quite simple, really: they are positioned 3px too low because of the
large padding, and remains hidden down there.

There's no way around that one. You'll have to position the
background-images relative to 'top left' - at least in IE, and just make
it look (somewhat) right.



Another minor addition for IE...

.tabs {height: 1%;}

...as a 'hasLayout' trigger to make those elements expand properly.

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



[WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng
Hi, I am doing a layout that requires equal height for each column  
and row, however the contents inside of each column and row are  
different and in some pages, in certain sections, the length of the  
content will be decided by end users' data feed. Each column, each  
row has its own background color (gradient image). I don't want to  
set 'height' attribute; I maybe able to play with pixel perfect with  
precise calculation  to obtain equal height but when a user resize  
font size, the integrity will be lost.


Here is a mockup screen shot, client got everything precisely line up:
http://project.lotusseedsdesign.com/ss.png

an untidy layout I just did
http://project.lotusseedsdesign.com/ss02.png

my markup is such:

div class=left_colFirst row, first column /div  
div class=right_colFirst row, second column /div

div class=left_colsecond row, first column /div 
div class=right_colsecond row, second column /div

I was thinking if I insert a wrapper for each row so it looks like so

 div class=wrapper
div class=left_colFirst row, first column /div  
div class=right_colFirst row, second column /div
/div

 div class=wrapper
div class=left_colsecond row, first column /div 
div class=right_colsecond row, second column /div
/div


However with different background colors that are controlled by  
gradient images, it seems pointless to do so.


Your suggestion deeply appreciated!

Thanks!

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Gunlaug Sørtun

Tee G. Peng wrote:

Hi, I am doing a layout that requires equal height for each column
and row, however the contents inside of each column and row are
different and in some pages, in certain sections, the length of the
content will be decided by end users' data feed.


I suggest you try building it with CSS table, with the usual workaround
for IE/win.

Example: http://www.gunlaug.no/tos/moa_11.html
...which includes IE fixes.
Study Roger's article (linked in) and demos for the rest.

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Al Sparber

Example: http://www.gunlaug.no/tos/moa_11.html
...which includes IE fixes.
Study Roger's article (linked in) and demos for the rest.


IE7 wants to scroll the negative margins. There are some scripted 
solutions that might be easier to manage, so long as the equal columns 
can be seen as an enhancement.


--
Al Sparber
PVII
http://www.projectseven.com








***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Rob O'Rourke

Tee G. Peng wrote:
Hi, I am doing a layout that requires equal height for each column and 
row, however the contents inside of each column and row are different 
and in some pages, in certain sections, the length of the content will 
be decided by end users' data feed. Each column, each row has its own 
background color (gradient image). I don't want to set 'height' 
attribute; I maybe able to play with pixel perfect with precise 
calculation  to obtain equal height but when a user resize font size, 
the integrity will be lost.


Here is a mockup screen shot, client got everything precisely line up:
http://project.lotusseedsdesign.com/ss.png

an untidy layout I just did
http://project.lotusseedsdesign.com/ss02.png

my markup is such:

div class=left_colFirst row, first column /div   
div class=right_colFirst row, second column /div


div class=left_colsecond row, first column /div   
div class=right_colsecond row, second column /div


I was thinking if I insert a wrapper for each row so it looks like so

 div class=wrapper
div class=left_colFirst row, first column /div   
div class=right_colFirst row, second column /div

/div

 div class=wrapper
div class=left_colsecond row, first column /div   
div class=right_colsecond row, second column /div

/div


However with different background colors that are controlled by 
gradient images, it seems pointless to do so.


Your suggestion deeply appreciated!

Thanks!

tee



Hi Tee,

If those blocks always contain similar output you could float your 
blocks left to stack them up and set the height in ems. Seems to me the 
easiest way to do a layout like that.


e.g.

div id=container

div class=left id=bookmarks/div
div class=right id=people/div
div class=left id=sites/div
div class=right id=tags/div

/div

and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle e.g.  
|400px| 30px |400px|  */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } /* 
whatever your dimensions need to be */

.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per the 
image and you have a nice semantic unique id on each to apply styles 
with. Might need some tweaking for cross-browser goodness but in a fixed 
width layout that code should be safe to work from.


Hope that gives you some ideas.
Rob O


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng


On Nov 4, 2006, at 8:02 PM, Al Sparber wrote:


Example: http://www.gunlaug.no/tos/moa_11.html
...which includes IE fixes.
Study Roger's article (linked in) and demos for the rest.


IE7 wants to scroll the negative margins. There are some scripted  
solutions that might be easier to manage, so long as the equal  
columns can be seen as an enhancement.


Yeah, Al is right. I see the endless vertical scrolling from IE7. Got  
fix for IE7 -:)


http://project.lotusseedsdesign.com/eqforie7.png

Al, I aware you have an equal height script and just went back to  
take look, can it be used for many columns with rows? I ask because  
of the reading from 'the script argument' paragraph. The in-house  
programmers maybe able to come out something similar but if they  
don't know how to hook up id and class for dl element, it  may be  
better not to count on them.


tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng


On Nov 4, 2006, at 8:22 PM, Rob O'Rourke wrote:





Hi Tee,

If those blocks always contain similar output you could float your  
blocks left to stack them up and set the height in ems. Seems to me  
the easiest way to do a layout like that.


e.g.

div id=container

div class=left id=bookmarks/div
div class=right id=people/div
div class=left id=sites/div
div class=right id=tags/div

/div

and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle  
e.g.  |400px| 30px |400px|  */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } / 
* whatever your dimensions need to be */

.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per  
the image and you have a nice semantic unique id on each to apply  
styles with. Might need some tweaking for cross-browser goodness  
but in a fixed width layout that code should be safe to work from.




Rob, thank you very much! I will play with your suggestion - more  
homework for tonight I am afraid :)


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Al Sparber

http://project.lotusseedsdesign.com/eqforie7.png

Al, I aware you have an equal height script and just went back to 
take look, can it be used for many columns with rows? I ask because 
of the reading from 'the script argument' paragraph. The in-house 
programmers maybe able to come out something similar but if they 
don't know how to hook up id and class for dl element, it  may be 
better not to count on them.


Our script was not written for multiple rows. An image-based faux 
column technique would work.


--
Al 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng


On Nov 4, 2006, at 8:22 PM, Rob O'Rourke wrote:


and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle  
e.g.  |400px| 30px |400px|  */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } / 
* whatever your dimensions need to be */

.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per  
the image and you have a nice semantic unique id on each to apply  
styles with. Might need some tweaking for cross-browser goodness  
but in a fixed width layout that code should be safe to work from.



Rob, I am playing with your suggestion this moment. Setting height in  
EM seemed a very good approach, even for rows  that have different  
lenght of contents. When I tried enlarge the font size in Firefox and  
Safari, it however gives an undesirable space at the bottom of each  
row, the same goes to deduce the font size.


I am thinking, perhaps it's best to combine yours and Georg'  
suggestion, using table-row and table-cell for display element for  
advance browsers,  then feeds IE 6 and 7 the height with EM,. IE 7  
has zoom feature like Opera, this maybe a more sensible approach?


Regards,

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***