2

I have an old ASP web application for Time Sheet entry which is riddled with CSS expressions. They appear in the CSS file:

.ApptPage {
    position            : relative;
    height              : expression(Math.max(document.body.offsetHeight-this.offsetTop-document.body.marginTop,0));
    border              : 0 solid black;
}

and in the ASP:

<IFRAME SRC="TimeSheetView.asp?<%=sQueryStandard%>" id=frameContent style="border-left:0;position:absolute;top:0;width:expression(Math.max(0,divContent.offsetWidth-20));height:expression(Math.max(0,divContent.offsetHeight-this.offsetTop));border:0px;left:0px;"></IFRAME>

The application works fine for IE but after over 10 years of use we want to make it ready for the next 10 years and make it browser agnostic.

This was the first time I ever saw an expression in CSS and I am at a loss for finding a way to replace it? Does anyone have a suggestion?

zam664
  • 757
  • 1
  • 7
  • 18
  • Is there a particular need for the height to be dynamic? If not, it may just be something you can throw away. – cimmanon May 17 '13 at 19:32
  • @cimmanon: The markup creates a table which resizes with the browser and the cell contents. It helps keeping things organized. – zam664 May 17 '13 at 19:43
  • I get that, but there's all sorts of relative units that can be used instead, with or without media queries. Expressions were most commonly used *because* of a lack of media queries. – cimmanon May 17 '13 at 19:45

3 Answers3

0

These expressions were specific to IE, but they are deprecated and abandoned, even by IE:

Ref: http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx

As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 (Quirks) mode or IE7 Standards mode.

and

Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher.

You can use JavaScript or CSS or a combination of both to achieve what these expressions are doing.

Arbel
  • 30,599
  • 2
  • 28
  • 29
0

I'm not sure what/how exactly the expressions calculate, but I solved a similar problem (i.e. I needed dynamic heights) a while ago with the help of the descriptions and examples given on http://help.dottoro.com/. Just enter the terms (offsetWidth, offsetHeight, offsetTop, marginTop) one by one in the search field and hit Enter.

You should have a working knowledge of javascript, though. Because that is what you have to use to replace these expressions. There are developments on the CSS front regarding dynamic dimensions, but those styles are not supported by IE7-9, so that is no use.

Frank Conijn - Support Ukraine
  • 3,050
  • 1
  • 22
  • 29
0

In IE11, dynamic CSS using expression is not supported. Now, there are two things you can do.

  • Change height of a specific element

    var singleElement = document.getElementById("yourElement");
if (singleElement)
 singleElement.style.height =
          Math.max(document.body.offsetHeight-this.offsetTop-document.body.marginTop,0) + "px";

  • Change the 'height' value of all elements which use the class

    var allElements = document.getElementsByClassName("ApptPage");
//Now loop through 'allElements' and set singleElement.style.height
KSK
  • 666
  • 4
  • 22