This website design is based entirely on cascading style sheets (CSS). I do not use any javascript in this website and I do not use any tables for layout purposes. The only tables are those where the content itself is tabular (for example, the calendar in the left column of my blog). There are no borderless tables at all.
It is because of the reliance on CSS, that I say that the web site is optimized for modern standards-compliant browsers like IE 7 and Firefox both of which I use for testing the site. I remain committed to browser independent web design and do also test my pages using the text-only web browser – Lynx. Though, the web pages would not render in the intended format and layout if the browser does not support CSS well, the site should be viewable using any browser.
The “printable page” option on each page is also produced using CSS by setting the display property to “none”. The HTML (or rather XHTML) source for the printable page is identical to that of the normal page except that it references a different stylesheet. The “web only” portions that are to be omitted while printing are placed inside “span” or “div” tags with a named class that has the “display:none” style in the stylesheet used for printing. This means that if the browser does not support CSS well, the printable page option is useless. Some pages have an “exportable page” option which does not rely on CSS. Instead, in this option, I use an XSL stylesheet and XSLT tools to remove the “web only” content from the HTML source itself. This is useful for exporting the content into a wordprocessor.
The menus at the bottom of the page are created using a “div” that is styled as “position:fixed; bottom:0; z-index: 1; ”. This therefore remains visible at the bottom of the screen while the main page is scrolled. The only problem with this solution is that the last few lines of the main page are hidden under the menus. To solve this there are a few blank lines at the end of the main page (more precisely a single line with an appropriate height setting). When the main page is scrolled down to the bottom, this blank line is hidden under the menus and the actual content remains visible. If the browser does not support CSS well, the menus might not appear at the bottom of the screen but would be visible when the page is scrolled to the bottom.
The website uses PHP for all its pages. But this is only a convenient way of including the same header and footer on each page. By physically including this header and footer on each page, I could avoid using PHP altogether. Alternatively, I could use Server Side Includes (SSI) to replicate almost all of what I do with PHP. The server side technologies like PHP and SSI make no difference to the browser which only sees the generated HTML content.
My blog is powered by Blosxom. I use CSS to lay out the content generated by Blosxom, to overlay the menu at the bottom of the screen and to provide printable pages. Of course, much of this is possible only because Blosxom is an open source blogging software. Again, the server side blogging software makes no difference to the browser which only sees the generated HTML content.
Optimized for modern standards-compliant browsers like IE 7+ and Firefox 2+