#heading:first-line { color: #993333; font-size: 26pt; }
<button style="background-color: #444478; color:white; font-weight:bold;" onclick="load('xml/flights.xml')"> <img width=70 height=34 src="images/tinylogo.gif" align=left>Go Find<br>That Flight! </button>
function hideElt(elementID) { document.getElementById(elementID). style.opacity = '0.00'; } function showElt(elementID) { document.getElementById(elementID). style.opacity = '1.00'; }
function hlt(event) { this.style.backgroundColor= "rgb(255, 255, 204)"; this.style.textDecoration= "underline"; } function dlt(event) { this.style.backgroundColor= "transparent"; this.style.textDecoration="none"; }
function depress() { this.style.position="relative"; this.style.left="3px;" this.style.top="3px;" this.style.color="#660000"; }
function init() { var links = document.getElementsByTagName("A"); for (var i=0; i<links.length; i++) { links.item(i).onmouseover=hlt; links.item(i).onmouseout=dlt; links.item(i).onmousedown=depress; links.item(i).onmouseup=undepress; links[i].onclick=donothing; } }
<html:form> <html:input type="button" id="toggle" value="Toggle Style" onclick="initiateToggle(); return false;"/> </html:form> <html:script src="flights.js" />
Gecko
All properties: http://style.webreview.com/
mastergrid.html
"Safe" properties: http://style.webreview.com/safegrid.html
"Unsafe" properties: http://style.webreview.com/
unsafegrid.html
Nav4 puts background-color behind an element's text.
IE4 puts it to the right edge of the page. Example: this markup:
<P STYLE="background-color: red">red background</P>
looks like this in Nav4:
red background
... and like this in IE4:
red background |
To make background color behind the element's text only in both browsers, set background color on a <SPAN> enclosing the text.
white on black
To make background color to right edge of page in both browsers, use 1x1 table element with WIDTH=100%.
white on black |
To make background color behind entire element area (regardless of amount of text), use 1x1 borderless table with WIDTH and HEIGHT and background properties set to match element.
some text that doesn't fill the element |
Put the contents of the STYLE element in HTML comments. This hides the CSS1/CSSP markup from older browsers, so it is not seen by user. Example:
<STYLE TYPE="text/css"><!-- #foo { color: red } --></STYLE>
Use the
Ultimate JavaScript Client Sniffer
at:
http://developer.netscape.com/docs/
examples/index.html?content=
javascript/browser_type.html
Supports Nav2+, IE3+, Opera on all platforms.
After you detect browser vendor, version, and (when necessary) OS, you can:
if (document.getElementById) { /* W3C DOM CODE */ } else if (document.layers) { /* Nav4 DOM CODE */ } else if (document.all) { /* IE4 DOM CODE */ }
Convenience function. document.write(str) iff browser version >= optional argument minVersion and browser version <= optional argument maxVersion.
function dw(str, minVersion, maxVersion) { if ( ((dw.arguments.length < 3) || (is.major <= maxVersion)) && ((dw.arguments.length < 2) || (is.major >= minVersion))) document.write(str) }
Convenience function. document.write(str) iff optional argument aBoolean is true. Powerful when used with booleans from JavaScript Client Sniffer.
function dwb (str, aBoolean) { if ((dwb.arguments.length < 2) || aBoolean) document.write(str) } // Example: provide advice to user dwb ("Download Netscape Now!", is.ie);
Convenience function. Return str iff browser version is
>= optional argument minVersion and <= optional argument maxVersion.
Else return "". Useful when concatenating long strings to write out.
function sv(str, minVersion, maxVersion) { if ( ((sv.arguments.length < 3) || (is.major <= maxVersion)) && ((sv.arguments.length < 2) || (is.major >= minVersion))) return str; else return ""; }
Convenience function. Return str iff optional second argument aBoolean is true. Else return "". Useful when concatenating long strings to write out.
function sb (str, aBoolean) { if ((sb.arguments.length < 2) || aBoolean) return str; else return ""; }
Functions dw, dwb, sv, and sb are included in the xbdhtml.js API
(view or
download),
which is explained in the TechNote on Setting CSSP Properties from JavaScript at:
http://developer.netscape.com/docs/
technote/dynhtml/index.html?content=
csspapi/csspapi.html
1. In HEAD, create a target style sheet:
<STYLE ID="ietssxyz" TITLE="headstyle" TYPE="text/css"></STYLE>
2. Define a function to get the style sheet object
var styleSheetTitle = "headstyle"; function getStyleSheetByTitle (styleSheetTitle) { var i = 0; while ( ( i < document.styleSheets.length ) && (document.styleSheets.item(i).title != styleSheetTitle) ) { i++; } if (i == document.styleSheets.length) return null; else return document.styleSheets.item(i); }
3. Define a convenience function to add a rule to the style sheet
function addRuleToStyleElement (styleSheetElement, selector, declaration) { styleSheetElement.insertRule (selector + " { " + declaration + " } ", styleSheetElement.cssRules.length); // insert at end of sheet }
To achieve the same result, the rules must be added by JavaScript at the same place in the HTML markup in the same order.
This will make sure they get the same CSS1 priority level in IE4 and Nav4. (Later rules have higher priority.)
In HEAD, create a target style sheet:
<STYLE ID="ietssxyz" TITLE="headstyle" TYPE="text/css"></STYLE>
In SCRIPT within HEAD, add rules to target style sheet:
<SCRIPT LANGUAGE="JavaScript1.2"> if (is.nav5up) addRuleToStyleElement (styleSheetElement, ".hint", "background-color:yellow"); else if (is.nav4) document.classes.hint.all.color = "yellow"; else if (is.ie4up) document.styleSheets ["ietssxyz"].addRule (".hint", "background-color:yellow"); </SCRIPT>
You can automatically generate cross-browser JavaScript to define
CSS1 rules with the code generator in the
TechNote on Setting CSS1 Properties from JavaScript at:
http://developer.netscape.com/docs/
technote/index.html?content=
dynhtml/css1tojs/css1tojs.html
TechNote on this Cross-Browser DHTML Presentation Template (for
Nav4, IE4, and Nav3) and downloadable version at:
http://developer.netscape.com/docs/
technote/index.html?content=
javascript/prestemp/prestemp.html
Netscape xbdhtml.js:
view or
download,
and
read the TechNote
CBDHTML API: http://members.aol.com/
MHall75819/dhtml/cbdhtml.html
Dynamic Duo Tutorial:
http://members.xoom.com/dynduo/
Active Layers API:
http://www.alapi.com/lite2/
FreeDOM: http://www.thepattern.com/