<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
Looking at "official" TABs plugin, I realized that the HTML
structure is not very "natural". It uses a list (UL) of tab headers
follow by tab bodies (DIV). Normally, what you get from your favorite
CMS is something more like : a header (div, h,...), its body (div),
another header (div, h, ...), its body (div), etc...
My challenge was, using this last "natural" HTML structure, try to
layout it in a TABs way. I think I've got it:
<a href="http://www.ita.es/jquery/tabs_only_css.htm">http://www.ita.es/jquery/tabs_only_css.htm</a>
, where practically I have used the same HTML for all 8 TABS
combinations. The result is compatible with IE6, IE7, FF and Opera. But
there are some limitations to take into account when implementing as a
Jquery plugin (as I wish, ;-):
<ul>
<li>
<div>Only versions topRight, topLeft, leftTop and rightTop are100%
automatic (CSS doesn't depend on TABs number, height and width).</div>
</li>
<li>
<div>Versions leftBottom, rightBottom, bottomLeft and bottomRight
depends on TABS number, and the height and/or width applied (This is
very "jquerysh-able")</div>
</li>
<li>
<div>I used QUIRK format (see doctype in HTML) for IE: the same CSS
for IE6 and IE7, but in STRICT format it would only work in IE7 (I
don't control IE6 by now)</div>
</li>
<li>Body TABs height is fixed (100px) and scroll appears where
content doesn't fit. In case of non-liquid TABs, with fixed width, it
could be possible to automatically calculate height for no-scroll body
via jquery-script with 3 modes:</li>
<li>
<ol>
<li>
<div>height fixed: like now in the example.</div>
</li>
<li>
<div>height max: fixed to maximum no-scroll body TAB height.</div>
</li>
<li>
<div>height auto: calculating each no-scroll body TAB height.
</div>
</li>
</ol>
</li>
</ul>
With all this, next steps would be: to search a little more for IE6
STRICT mode compatibility, and to create a Jquery plugin (with CSS
dinamically generated?)
Any suggestions, help, critics, comments, are very welcome.
<pre class="moz-signature" cols="72">--
Enrique Meléndez Estrada (2367)
Servicios Informáticos
Organización y Servicios Internos
Instituto Tecnológico de Aragón</pre>
</body>
</html>