Sent by Linda Antonsson on 16 October 2004 15:03
Bruno Fassino wrote:
> 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.
>
I see. That's odd, though. Pulling out <SCRIPT SRC="../Framebreaker.js"
TYPE="text/javascript"></SCRIPT> from the page stopped the locking up
when I use the second script (the one which does subtract the padding),
but if I leave the other javascript in, that version crashes too. Some
weird coincidence, I guess.
How would I comment out the doctype declaration, btw? On another page,
which also needed some hacks to work in IE, I use <!-- Quirk on --> at
the top of the page. Is that how you mean? :)
> 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.)
Right, that's one of the things I wondered about initially, how the
first script could be adjusted to take into account the padding as well.
Initially, I did notice that using the first script didn't result in
equal columns unless I applied the same padding to both. This fixed the
height, but is that what is causing the loop in IE then?
> 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.)
I've tried doing that, but so far, no luck. I don't really know
Javascript at all, so that's probably why I haven't figured it out yet.
I'll renew my efforts, though. :)
> 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.
In IE or Mozilla? In Mozilla, this works fine for me with the first
script, but not with the second. However, the first does do some other
odd stuff on resize. Odd, since it is called with both onload and onresize.
>
> 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.
Thank you for creating that example. :)
My main problem with that, as with some of the other pure CSS solutions,
is that I do find it pretty hard to understand what does what, and so I
find it difficult to apply these methods to other layouts. But its
definitely worth an attempt.
>
> 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.
These are, admittedly, some of the things that I am concerned about. I
do tend to always use textured backgrounds rather than solid colours,
which always makes it a bit more complex. And given that the design
isn't finished yet, I suspect that some of the stuff I have in mind will
break it, and then it'll likely be too complex for me to manage to find
the right hacks.
But again, thanks for your advice. I might not feel confident enough
just yet to tackle some more complex CSS solutions, but with some
practice I might get there. :)
Linda
______________________________________________________________________
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/