Standards-compliant cross-compatibility

[ti-design.bizhat.com]

(off the top of my head, please correct me if you see errors)

Not a single one.

I would like to add up a few lines here. One may wish to go even a bit further and want to make sure also his images scale with the text. To this end, suppose we have an image MYIMGAGE.GIF included with the following HTML code:

[img]path/to/the/image/MYIMAGE.GIF[/img]

As the size is not specified with WIDTH and HEIGHT, the image will be displayed in its natural size, lets assume it is 100x100px. In order to make it scablable, you can use the following CSS lines

<style type="text/css">
.ScIm { width: 10em; }
</style>

In this way the width of the HTML element having a class attribute value ScIm will be 10em (meaning 10 times the height of the letter M). So if you scale the text (CTR/scroll or CRT/+- in most browsers), the image will also scale.

Similarly, suppose you have a two-column layout with the left column taking 10% of the window and the right one taking the remaining 90% (see, e.g., Pathoschild's post above on how to achieve it). Suppose further that in the left column you have an image, again our MYIMAGE.GIF. If you leave the origilal 100x100px image size unchanges, then it can become wider than the left column when the window is reduced to a size of less than 1000px (since the left column is 10% of it). To avoid such an unwanted effect, you can define the width of the image as 100%, i.e.

<style type="text/css">
.ScIm { width: 100%; }
.column-left {width: 10%; }
</style>

It will then fill up the width of the div-element that contains it:

<div class="column-left">
[img]path/to/the/image/MYIMAGE.GIF[/img]
Bla-bla
</div>

Note that when specifying image sizes it is advisable you only specify the height OR the width, but not both. In this way you make sure the proportions remain unchanged...