This approach, which looks great but that, unfortunately, does not really work in the real world. It uses JavaScript to create a style attribute that includes left and right margins that are one-half the difference between 600 and the screen width (or browser window width: take your pick) -- so far, so good: just like other methods demonstrated -- and then sets that as the value of the style attribute of the <p> element using a JavaScript variable as an HTML attribute value (i.e., <p style="&{padtext};">) -- which is where it all goes to pieces. This does not work under Internet Explorer, never having made its way into JScript, perhaps because the attribute value usage was developed by Netscape in NS 3: going with the flow, it no longer works in NS 6, either. So this is not a feasible technique to use (but if you have it available, try this under NS4 just to see that it worked).
<!-- Set 600 pixels as percentage of screen width --> <script type="text/javascript"> <!-- // <![CDATA[ var column = new Object() ; column.text=100*(600/screen.width); column.pad = (100-column.text)/2 ; text = column.text ; pad = column.pad ; // ]]> --> </script>
<table align="center" border="1" width="100%"> <caption>Using an object reference</caption> <tr> <td width="&{column.pad};%"> </td> <td width="&{column.text};"> blah blah blah . . . </td> <td width="&{column.pad};%"> </td> </tr> </table>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah |
<table align="center" border="1" width="100%"> <caption>Substitution of a variable for the object reference</caption> <tr> <td width="&{pad};%"> </td> <td width="&{text};"> blah blah blah . . . </td> <td width="&{pad};%"> </td> </tr> </table>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah |
<td width="50%" width="&{column.text};">
The browser read the first (hard-coded) width, ignoring the second (variable-coded) width, even when javascript was enabled.
<td width="&{column.text};" width="50%">
The browser read the first (variable-coded) width, ignoring the second (hard-coded) width, even when javascript was disabled.
The browser always reads the first width, ignoring the second
AND
the page validates as an error with the second "width" specification.
This page validates as XHTML, as indicated by the tag below; however, there is a problem validating the CSS. The CSS validator (as it operates as of the publication date of this page) fails an intitial XHTML scan and never gets to the CSS validation; instead, it returns an error messge that the page needs to be validated as XHTML before it can be validated as CSS: o.k., but it just did validate as XHTML! The problem is the format of the JavaScript/HTML variable substitution. The XTHML validator sees and recognizes the "&" as a special symbol: it sees an unfamiliar argument but passes it anyway (apparently it recognizes the argumeent as an argument, albiet an unfamiliar one). The CSS validator sees and recognizes the "&" as a special symbol: it sees an unfamiliar argument, assumes an error in the XHTML code, and stops the validation process before proceeding to the CSS validation.
Document: http://
Revised: |