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_col">popular bookmarks</div>
<div class="right_col">popular people</div>
</div>
<div class="content">
<div class="left_col">popular sites</div>
<div class="right_col">popular 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_col">popular bookmarks</div>
<div class="right_col">popular people</div>
</div>
<div class="content">
<div class="left_col">popular sites</div>
<div class="right_col">popular 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.
http://project.lotusseedsdesign.com/SH-new/with_height.html
div.left_col1, div.right_col1 {width: 440px;margin-bottom: 20px;
height: 20em; }
div.left_col1{float: left;}
div.right_col1 {float:right}
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!
Regards,
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
