Sent by Bruno Fassino on 16 October 2004 14:02
Linda Antonsson wrote:
(about <http://www.westeros.org/ASoWS/>
> However, it also appears the javascript mystery may be
> solved. It seems IE did not appreciate having two Scripts
> called within the same page.
I see the IE/Win 'freeze' problem even with the single SetHeight.js
javascript. It is related to the rendering mode (standards/quirks): IE5.x
doesn't have the problem, and if you comment out the doctype declaration (so
putting IE6 in quirks mode) IE6 doesn't hang anymore.
The explanation for this is mentioned in the second page you referred [1]:
The offsetHeight value includes the padding, but when you set
<element>.style.height (in standards mode) you set the height of the element
'sans border and padding.'
You are applying this to elements having vertical padding, so this is
triggering a sort of 'infinite loop' in IE (Mozilla is simply adding extra
padding at the bottom.)
If you want, you can probably fix this, still maintaining the standards
rendering mode of IE6, applying in the js the same corrections mentioned in
[2] (in short: subtract the padding.)
BTW, the js script seems to have also another problem: if you shrink the
window so that the height increases, and then enlarge it again the columns
height is not reduced back.
But this is going much off-topic, so to come back to CSS:
As others have mentioned, you can try a CSS only solution.
Using floats and negative margins and starting from your page I got this
example [2]. It seems to work well in IE5+ (Windows and Mac), Geckos,
Opera6+, Safari. I added a footer to check things better: shrink and
enlarge the window so that the longest column is either the second or the
first.
The main drawback is the use of some extra (not semantic) wrapper divs,
partly to maintain your backgrounds. These divs can probably be reduced (but
not totally), creating suitable background graphics and tackling box model
problems (current page is more easily editable, in case of widths
modification.) As a further warning please note that now the CSS is rather
simple, but should you have more 'complex' content in your columns, you may
(unfortunately) need to add some hacks.
HTH,
Bruno
[1] <http://www.paulbellows.com/getsmart/balance_columns/>
[2] <http://www.brunildo.org/test/test/ASoWS2.html>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/