Pooya Karimian

Sometime ago I used a template from oswd.org as the template for a site and I choose a table-less CSS design. A CSS design will make the page load faster and more easy to change (just by changing the definitions of the style).

One interesting thing about CSS in Internet Explorer is that you can use javascript expressions inline. This can be used to easily do some nice designs (e.g dynamic resizing of elements). Take a look at this example:

--Click here and write something!--

Test Box

and this the HTML :

<span id="pooyak_el1" 
      contentEditable=true 
      style="background: lightblue;">
 --Click here and write something!--
</span>
<span id="pooyak_el2" 
      style="background: yellow; 
             width: expression(pooyak_el1.offsetWidth+'px');
             height: expression(pooyak_el1.offsetHeight+'px')">
 Test Box
</span>

- w3.org's Tableless layout HOWTO
- From Table Hacks to CSS Layout: A Web Designer's Journey
- Advanced CSS Layouts: Step by Step

- MSDN: About Dynamic Properties
- CSS Expressions

Update: I changed my site to XHTML seems like the example above is not working (which is an IE only example) is not working anymore...

---

Posted to Programming by pooya at April 17, 2004 06:35 PM

---