by March 1, 2005 0 comments



Sometime before March 2003, the W3C (World Wide Web Consortium) that develops models, standards and strategies for Web application development, proposed the use of layers in place of tables in designing Web pages as smaller-screen browsing devices, such as PDA and cellphones, suffer from wasted screen-space lost to tabular alignments. The only reason they could offer an alternative was that CSS2 (the next generation standard for Cascading Style Sheets) has already been approved. One major problem in implementing the W3C suggestion was that there was no browser around-IE, Mozilla, etc-that offered CSS2 support. And, you cannot implement this idea, if the browser doesn’t support CSS2. Come 2005, we still don’t have a browser that supports CSS2.
Thanks to people like Dominique Hazaël-Massieux, Dean Edwards ( http://dean.edwards.name/IE7
) and Eric Meyers ( http://www.meyerweb.com/eric
), such a thing has become possible. No, they have not written a brand new Web browser. Dominique has made a few recommendations and sample code on how to do this without any scripting. The latter two have combined JavaScript techniques and browser behaviors to enhance modern browsers and ‘activate’ their CSS2 support.

Pure CSS

The Dominique technique is to create CSS classes with layers (DIV tags) in mind. In these classes, you would define absolute positioning coordinates and sizes. Later, in the HTML, you would position this where appropriate on the page. This is very simple to understand and implement, though you would need to have some prior knowledge of coordinates. However, this is also the most cross compatible of the two ideas. Non-CSS browsers or those with CSS disabled, would automatically downgrade and show the items one below the other according to HTML layout rules. 

Direct Hit!
Applies to:
Web developers
USP: Learn to use layers instead of tables in your Web pages
Links:
http://w3.org, http://sourceforge.net 

Most Web pages have a three-column layout, with menus on the left, advertising or links on the right and the content in the middle. We show the HTML to do this using TABLES below:

<TABLE>
<TR>
<TD width=”200px”>Menu comes here</TD>
<TD width=”100%”>Content comes here</TD>
<TD width=”200px”>Ads or links go here</TD>
</TR>
</TABLE>

CSS-only equivalent is as follows.

.MenuColumn {
Position: absolute;
Left: 10px;
Top: 5px;
Width: 200px;
}
.BodyColumn {
Margin-left: 199px;
Margin-Right: 199px;
}
.LinksColumn {
Position: absolute;
Right: 10px;
Top: 5px;
Width: 200px;
}…
<div class=”MenuColumn”>Menu comes here</div>
<div class=”BodyColumn”>Content comes here</div>
<div class=”LinksColumn”> Ads or links go here</div>

IE 7

IE 7 is not out yet. It’s a project from Dean Edwards on SourceForge. The script here is quite long and complicated. To use it you will need to download a ZIP file with some JavaScript files (.js) from
www.dean.

edwards.name. You then have to copy atleast one of these files to a location on your website’s directory tree and call it from your script. You need not modify your own code in anyway, except to add CSS2-compatible tags, directives and attributes. 

There are a few bugs and it’s quite early yet (Dean says it is Alpha 0.7.3 in its version!), you can nonetheless use the script to get some stunning effects and layouts. One small comment at this point is that most of his Web pages will tell you that these scripts won’t work with MSIE, but they work perfectly well with IE 6.
One of the interesting additions is that IE 7 allows you to add to your CSS classes something called the ‘CSS selectors’. These look like:

li:hover > ul {display: block;}

This style adds a ‘hover’ attribute to a list-item (LI) with a display value of ‘block’, only if it is placed inside an un-numbered list (UL). So, LI tags inside a numbered (OL) list are not affected. This is a powerful way to apply styles, and this is a purely CSS2 behavior.

One step higher would be to use commented directive blocks to apply styles to only those browsers that understand them. Of course, at this point of time, only MSIE understands commented directives. The example below applies the style we discussed above to only MSIE 5.0 and higher.

<!– [ if gte IE 5] >
<style>
li:hover > ul { display: block; }
</style>
<! [endif] –>

An example of using IE 7 in an HTML page to display a menu is shown in the below code.

<!–[if lt IE 7]>
<script src=”../ie7-standard.js” type=”text/javascript”></script>
<![endif]–>
<style type=”text/css”>
ul, li, li a {box-sizing: content-box; vertical-align: bottom;}

ul li:hover > ul {display: block; position: absolute; top: -1px; left: 100%;}

ul#topmenu li a:hover {background: yellow;}
li.sub > a {font-weight: bold; background: #FFE;}

h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;}


</style>

<ul id=”topmenu”>
<li class=”sub”><a href="https://www.pcquest.com">PCQuest Home</a>
<ul>
<li class=”sub”><a href="mailto:edit@pcquest.com” title=”Get support”>Support</a>
<ul>
<li><a href="http://forums.pcquest.com/forum/index.php” title=”Peer support at our forums is the fastest way”>PCQ Forums</a></li>
<li><a href="mailto:edit@pcquest.com” title=”E-mail us and we will get back to you”>E-mail </a></li>
</ul>
</li>

</ul>

Of course, until and unless such functionality becomes completely inherent in a browser, there will always be compatibility issues. 
We all await the release of newer versions of our favorite browsers that can do CSS2 and when it comes around, CSS3, along with implementations of XHTML, WML and the rest.

Sujay V Sarma

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

<