IE 5 also supports other bits and pieces of CSS2 that don't quite fit into tidy categories. Thus, I welcome you to the Other Cool Stuff page.
First, you can use stylesheets to specify where page breaks occur when a Web page is printed out:
P.break { page-break-after: always }
This code would always force a page break after a block of <P> that has CLASS="break".
Values for page-break-before and page-break-after include:
- always — forces a page break
- auto — uses default page breaks
(There are a few other values, but they're not yet supported by IE.)
Next is the new table-layout property. Normally, a browser has to look at all the contents of an HTML table before it can begin to render it. That's why pages with table layouts sometimes seem slooooow.
With table-layout, you can define a fixed width and height, and the browser will display the table contents more quickly.
<TABLE STYLE="table-layout: fixed" WIDTH="600">
<TR HEIGHT="30">
<TD WIDTH="150">xyz</TD>
<TD WIDTH="200">xyz</TD>
<TD WIDTH="250">xyz</TD>
</TR>
It's easy to use this property through inline CSS, as shown above. The browser knows the total table width right off the bat and won't take the time to double-check it as the table is displayed. Make sure to put widths into the <TD>s of the first row. You can also add heights if you desire. The result is faster rendering.
For a comparison, see this example from Microsoft.
What happens if content in the table or in a particular cell ends up bigger than the fixed size given to its area? It'll be clipped to fit the table. Also, a value of auto means that normal-browser table rendering will be used.
Finally, let's take a look at the direction property. Certain languages are written from right to left (e.g., Arabic, Hebrew). With direction, you can control which way the text runs.
H3 { direction: rtl }
Here, the base writing direction is specified as right to left, but there are other options. Here's the full list:
- rtl — right to left
- ltr — left to right
- inherit — value inherited from parent element
This feature can get more complicated, so if you want additional details, see this section of the CSS2 spec.
next page»
