By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,837 Members | 1,357 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,837 IT Pros & Developers. It's quick & easy.

[js] expression only works in IE when preceded by script element?

P: n/a

Hello,

The following is perhaps not directly a CSS problem, but it does seem to
involve Internet Explorer's stylesheet handling.

I tried Svend Tofte's solution for using expressions in stylesheets to
create a max-width effect. Very useful, but it does not work without
problems in IE 5.0 for Windows (or at all in IE 5.1 for Mac, but that may
have other causes).

The hack is this:

element
{
max-width: 300px;
width: expression(document.body.clientWidth > 300 ? "300px" : "auto")
}

Since IE is the only browser to understand the 'expression' value, it executes the Javascript contained in it. All other browsers will understand as far as the 'max-width' declaration.

Now here's the deal: this only works when 'element' contains certain types of child elements. It notably does not work with UL and LI children, unless a script is preceding the element that requires the max-width.

Here are some examples:

---begin test1.html---
<div style="border: 1px solid black;
width: expression(document.body.clientWidth > 450 ? '300px' : 'auto');">
<ul><li>test</li></ul>
</div>
---einde test1.html---
---begin test2.html---
<script></script>
<div style="border: 1px solid black;
width: expression(document.body.clientWidth > 450 ? '300px' : 'auto');">
<ul><li>test</li></ul>
</div>
---einde test2.html---
---begin test3.html---
<div style="border: 1px solid black;
width: expression(document.body.clientWidth > 450 ? '300px' : 'auto');">
<ul><li>test</li></ul>
</div>
<script></script>
---einde test3.html---

The only differences in these snippets are the placement of the string '<script></script>': test1.html does not have one, test2.html has it before the element with the max-width setting and test3.html after that element.

IE 5.0 will only render test2.html correctly. After a reload, the other two render correctly too.

Example renderings at <http://www.mixedflavours.nl/develop/maxwidth_for_IE5.png>.

My questions: does anyone know what causes this? Does anyone know
which other child elements may be affected? Why is UL so special as to not
'listen' to the Javascript within the expression?

--
Branko Collin
if you reply by e-mail, please change invalid to nl and z to s
(but replies to the news group are preferred)

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Branko Collin wrote:

[snip]
My questions: does anyone know what causes this? Does anyone know
which other child elements may be affected? Why is UL so special as
to not 'listen' to the Javascript within the expression?


Any ideas?

Jul 20 '05 #2

P: n/a

Branko Collin wrote:
The following is perhaps not directly a CSS problem, but it does seem
to involve Internet Explorer's stylesheet handling.

I tried Svend Tofte's solution for using expressions in stylesheets to
create a max-width effect. Very useful, but it does not work without
problems in IE 5.0 for Windows (or at all in IE 5.1 for Mac, but that
may have other causes).
[...]
Example renderings at
<http://www.mixedflavours.nl/develop/maxwidth_for_IE5.png>.

My questions: does anyone know what causes this? Does anyone know
which other child elements may be affected? Why is UL so special as
to not 'listen' to the Javascript within the expression?


No ideas? Hints? Clues?

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.