nicht angemeldet
gruss Lesende,
fuer alle interessierten (da diese frage im letzten monat des alten jahres haeufiger auftrat) eine testseite, die, so glaube ich, nur mit der reinen lehre arbeitet, aber auch keinen anspruch auf die komplette aufarbeitung des themas "+browser +table +css +javascript +hover" erhebt:
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>tableHighlighting.html</title> <style type="text/css"> /<![CDATA[/ html, body { background-color: #eeeeee; /* #f5f5f5 */ color: #000000; font-size: 101%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
/* - [DE] opera und mozilla setzen folgende anweisungen mit leichtigkeit um; - [EN] opera and mozilla handle this with ease; - [DE] MSIE ist voellig ahnungslos hinsichtlich fortschrittlicherer selektoren-konzepte; - [EN] MSIE has no clue of any of the more advanced selectors and display-attribut-values; / table { display: table; table-layout: auto; / fixed / } table>thead {display: table-header-group;} / "thead" - allowed within: "table" only - can enclose: "tr" only / table>tfoot {display: table-footer-group;} / "tfoot" - allowed within: "table" only - can enclose: "tr" only / table>colgroup {display: table-column-group;} / "colgroup" - allowed within: "table" only - can enclose: "col" only / table col {display: table-column;} / "col" - allowed within: "table", "colgroup" - empty element / table tr {display: table-row;} / "tr" - allowed within: "table", "tbody", "tfoot", "thead" - can enclose: "td", "th" / table td {display: table-cell;} / "td" - allowed within: "tr" only - can enclose: "blocklevel"- and "inline"- elements */
/* - [DE] funktioniert perfekt in opera 7++; - [EN] does it perfectly in opera 7++; - [DE] fuer denselben effekt benoetigt der MSIE eigene klassen; - [EN] use universal classes for same effect in MSIE; - [DE] mozilla reagiert auf die folgenden regeln ueberhaupt nicht; - [EN] mozilla won't show any effect at all (not even with the classes that work for MSIE); */ table#test01>colgroup { background-color: #ff9933; } table#test01>colgroup+colgroup { background-color: #ffcc66; }
/* - [DE] leider ist keiner der aktuellen windows-basierten-css-freundlichen-browser wie mozilla 1.5 oder opera 7.x in der lage, die dynamische pseudo-klasse "hover" auf die elemente "colgroup" bzw. "col" anzuwenden; - [EN] unfortunately none of the current windows-based-css-friendly-browsers like mozilla 1.5 or opera 7.x does handle the dynamic pseudo-class "hover" for the elements "colgroup" respectively "col"; */ table#test01>colgroup>col:hover { background-color: #ff6600; font-weight: bold; }
/* - [DE] opera und mozilla setzen folgende anweisungen mit leichtigkeit um; - [EN] opera and mozilla handle this with ease; - [DE] MSIE ist voellig ahnungslos hinsichtlich fortschrittlicherer selektoren-konzepte; - [EN] MSIE has no clue of any of the more advanced selectors; / table#test01 tr { / [DE] MSIE versteht nur diese regel / [EN] MSIE recognizes this rule only / text-align: right; } table#test01>tbody>tr:hover { background-color: #ff6600; /font-weight: bold;/ / [DE] hier wird es opera zu viel / [EN] too much for opera 7.x / } table#test01>tbody>tr>td:hover { background-color: #cc3300; /color: #ffffff;/ / [DE] hier wird es opera zu viel / [EN] too much for opera 7.x */ }
/* - [DE] das sind die schon oben erwaehnten zusaetzlichen klassen, die dem MSIE auf die spruenge helfen; - ungluecklicherweise ist mozilla hier ebenfalls stoerrisch;
- [EN] that's the above mentioned fix for MSIE in order to manage the columns appearance by styling "colgroup"- and "col"- elements; - sadly mozilla ignores this; / .colOdd { background-color: #ff9933; } .colEven { background-color: #ffcc66; } /]]>*/ </style> <script type="text/javascript"> //<![CDATA[ function tableCellOver(nodeObject,cssTextCell,cssTextRowCol) { if (!jsToggle.status) {return;} if ((typeof(nodeObject) == "object") && (nodeObject !== null) && nodeObject.nodeType && nodeObject.nodeName && (nodeObject.nodeType == 1) && (nodeObject.nodeName.toLowerCase() == "td")) { var currentColumn = 0; var currentRow = -1; var i = 0; var rowNode = nodeObject.parentNode; var cellNode = rowNode.firstChild; var tbodyNode = rowNode.parentNode; while (cellNode && (cellNode != nodeObject)) { if (cellNode.nodeType == 1) { currentColumn++; } cellNode = cellNode.nextSibling; } while (rowNode) { if (rowNode.nodeType == 1) { currentRow++; } rowNode = rowNode.previousSibling; } rowNode = nodeObject.parentNode; tbodyNode = rowNode.parentNode;
var tbodyEventFieldNode = document.forms["masterForm"].elements["tbodyEventField"]; var statusText = "rows [ " + tbodyNode.rows.length + " ]-columns [ " + rowNode.cells.length + " ] - row [ " + (currentRow+1) +" ]-column [ " + (currentColumn+1) + " ]";
tbodyEventFieldNode.value = statusText; window.top.status = statusText;
if (document.all && !window.opera) { for (i=0; i<rowNode.cells.length; i++) { rowNode.cells[i].style.cssText = cssTextRowCol; } } for (i=0; i<tbodyNode.rows.length; i++) { tbodyNode.rows[i].cells[currentColumn].style.cssText = cssTextRowCol; } nodeObject.style.cssText = cssTextCell; } } function tableCellOut(nodeObject) { if (!jsToggle.status) {return;} if ((typeof(nodeObject) == "object") && (nodeObject !== null) && nodeObject.nodeType && nodeObject.nodeName && (nodeObject.nodeType == 1) && (nodeObject.nodeName.toLowerCase() == "td")) { var currentColumn = 0; var currentRow = -1; var i = 0; var rowNode = nodeObject.parentNode; var cellNode = rowNode.firstChild; var tbodyNode = rowNode.parentNode; while (cellNode && (cellNode != nodeObject)) { if (cellNode.nodeType == 1) { currentColumn++; } cellNode = cellNode.nextSibling; } while (rowNode) { if (rowNode.nodeType == 1) { currentRow++; } rowNode = rowNode.previousSibling; } rowNode = nodeObject.parentNode; tbodyNode = rowNode.parentNode;
var tbodyEventFieldNode = document.forms["masterForm"].elements["tbodyEventField"]; var statusText = "rows [ " + tbodyNode.rows.length + " ]-columns [ " + rowNode.cells.length + " ] - row [ " + (currentRow+1) +" ]-column [ " + (currentColumn+1) + " ]";
tbodyEventFieldNode.value = statusText; window.top.status = statusText;
if (document.all && !window.opera) { for (i=0; i<rowNode.cells.length; i++) { rowNode.cells[i].style.cssText = ""; } } for (i=0; i<tbodyNode.rows.length; i++) { tbodyNode.rows[i].cells[currentColumn].style.cssText = ""; } nodeObject.style.cssText = ""; } }
function jsToggle() { jsToggle.status = !jsToggle.status; var jsToggleButtonNode = document.forms["masterForm"].elements["jsToggleButton"]; var tbodyEventFieldNode = document.forms["masterForm"].elements["tbodyEventField"]; var statusText = "toggle javascript - status: " + ((jsToggle.status) ? ("ON") : ("OFF")); jsToggleButtonNode.title = " " + statusText + " "; jsToggleButtonNode.value = statusText; tbodyEventFieldNode.value = ((jsToggle.status) ? ("") : ("no js at all - effects are powered by pure css")); window.top.status = ""; }; jsToggle.status = true; //]]> </script> </head>
... teil 2 folgt sogleich ...
sh:| fo:) ch:? rl:| br:& n3:} n4:# ie:| mo:{ va:| de:[ zu:] fl:) ss:) ls:& js:)