CINXE.COM

<!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="icon" href="http://www.zytrax.com/favicon.ico"> <title>Tech Stuff - CSS Techniques and Workarounds</title>   <style type="text/css">  </style> <style type="text/css" media="print">  </style> <script type="text/javascript">  </script> </head> <body>  <div class="l-b">  <a href="http://www.zytrax.com"><img id="toplogo" src="http://www.zytrax.com/images/zytrax-logo-info.png" alt="ZYTRAX Info Logo"></a>  <p class="n-t-t"><a href="http://www.zytrax.com/feedback.htm" class="n-t-sr">mail us</a>  |  <a href="http://www.zytrax.com/run/mailpage.php" class="n-t-sr">mail this page</a></p> <div class="n-t0"> <a href="http://www.zytrax.com/Company/contacts.html" class="n-t-sr">contact us</a> </div> <div class="n-t0"> <a href="http://www.zytrax.com/training/" class="n-t-sr">training</a>  |  </div> <div class="n-t0"> <a href="http://www.zytrax.com/tech/" class="n-t-sr">tech stuff</a>  |  <ul class="n-t1-v"> <li class="n-t1-es"><a href="http://www.zytrax.com/tech/" class="t-da">tech stuff</a>  <ul class="n-t2"> <li class="n-t2-e"><a title="collection of technology stuff" href="http://www.zytrax.com/tech/" class="t-da">tech stuff</a></li> <li class="n-t2-es t-da">web stuff <ul class="n-t3"> <li class="n-t3-e"><a title="collection of web based technology stuff" href="http://www.zytrax.com/tech/web/" class="t-da">web stuff</a></li> <li class="n-t3-e"><a title="collection of UA strings for most browsers" href="http://www.zytrax.com/tech/web/browser_ids.htm" class="t-da">browser ids</a></li> <li class="n-t3-e"><a title="collection of mobile UA strings" href="http://www.zytrax.com/tech/web/mobile_ids.html" class="t-da">mobile ids</a></li> <li class="n-t3-e"><a title="our HTML5 page conversion process and thoughts" href="http://www.zytrax.com/tech/css/html5.html" class="t-da">HTML5 Convert</a></li> <li class="n-t3-e"><a title="how we do server-side browser sniffing with apache" href="http://www.zytrax.com/tech/web/browser_sniffing.html" class="t-da">browser sniffing</a></li> <li class="n-t3-e"><a title="apache environmental variables" href="http://www.zytrax.com/tech/web/env_var.htm" class="t-da">apache env's</a></li> <li class="n-t3-e"><a title="apache server side includes - extensive notes and examples" href="http://www.zytrax.com/tech/web/ssi.htm" class="t-da">apache ssi</a></li> <li class="n-t3-e"><a title="our css pop-up/pop-down/flyout menus for Gecko/Opera/MSIE" href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="t-da">pop-outs (css)</a></li> <li class="n-t3-e"><a title="most of those annoying HTML entity codes that we forget all the time" href="http://www.zytrax.com/tech/web/entities.html" class="t-da">html entities</a></li> </ul> </li> <li class="n-t2-es t-da">open guides <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/books/" class="t-da">open guides</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/books/dns" class="t-da">dns guide</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/books/ldap" class="t-da">ldap guide</a></li> </ul> </li> <li class="n-t2-e"><a title="Decimal to Hexidecimal to Binary conversion - even Octal!" href="http://www.zytrax.com/tech/protocols/hex.html" class="t-da">Dec>Hex>Bin</a></li> <li class="n-t2-es t-da">survival stuff <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/" title="a series of survival guides for some popular open source software" class="t-da">survival stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/ssl.html" class="t-da">ssl/tls & x.509</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/asn1.html" class="t-da">ASN.1</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/kerberos.html" class="t-da">kerberos</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/postfix.html" class="t-da">postfix</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/cron.html" class="t-da">cron</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/encryption.html" class="t-da">cryptography</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/wxwidgets.html" class="t-da">wxWidgets</a></li> </ul> </li> <li class="n-t2-es t-da">audio stuff <ul class="n-t3"> <li class="n-t3-e"><a title="Pages about Digital Audio, Primers, Calculator, Equalization, FFT" href="http://www.zytrax.com/tech/audio/" class="t-da">audio stuff</a></li> <li class="n-t3-e"><a title="Fundamentals, harmonics, overtone, partials, loudness, ADSR envelopes" href="http://www.zytrax.com/tech/audio/sound.html" class="t-da">sound primer</a></li> <li class="n-t3-e"><a title="Sound digitization, time domain, frequency domain" href="http://www.zytrax.com/tech/audio/digital-sound.html" class="t-da">digital sound</a></li> <li class="n-t3-e"><a title="common frequencies of instruments and in life" href="http://www.zytrax.com/tech/audio/audio.html" class="t-da">frequencies</a></li> <li class="n-t3-e"><a title="equalization principles, octaves, sound metering and FFT" href="http://www.zytrax.com/tech/audio/equalization.html" class="t-da">equalization</a></li> <li class="n-t3-e"><a title="Acoustic caculators for musical notes and FFT bin frequencies" href="http://www.zytrax.com/tech/audio/calculator.html" class="t-da">calculators</a></li> <li class="n-t3-e"><a title="Yet another audio glossary" href="http://www.zytrax.com/tech/audio/glossary.html" class="t-da">glossary</a></li> </ul> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/web/regex.htm" class="t-da">regex stuff</a></li> <li class="n-t2-es t-da">cable stuff <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/" class="t-da">cable stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="t-da">lan wiring</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/mixed.html" class="t-da">lan & telephone</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="t-da">rs232 stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/heavy.htm" class="t-da">serial primer</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/pc/serial.html" class="t-da">usb 3.2 & firewire</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/pc/monitors.htm" class="t-da">displays</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/cables_jacks.htm" class="t-da">modular jacks</a></li> </ul> </li> <li class="n-t2-es t-da">protocol stuff <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/" class="t-da">protocol stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/tcp.html" class="t-da">tcp-udp-icmp</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ip-classes.html" class="t-da">ipv4</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ip-classes.html#calculator" class="t-da">ipv4 Calculator</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html" class="t-da">ipv6</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html#calculator" class="t-da">ipv6 Calculator</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/isdn" class="t-da">isdn-bri</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/lan" class="t-da">802 lan</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/ss7" class="t-da">ss7 & sigtran</a></li> </ul> </li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/pc/" class="t-da">pc stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/wireless/" class="t-da">wireless stuff</a></li> <li class="n-t2-es t-da">css stuff <ul class="n-t3"> <li class="n-t3-e"><a title="collection of css notes and experiences including css menus and css liquid layout" href="http://www.zytrax.com/tech/css/" class="t-da">css stuff</a></li> <li class="n-t3-e"><a title="Notes on our experience with converting to css based liquid layouts - including blow by blow css" href="http://www.zytrax.com/tech/css/layoutnotes.html" class="t-da">css liquid design</a></li> <li class="n-t3-e"><a title="we have used css menus since mid-2003 - blow-by-blow implementation notes" href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="t-da">css menus</a></li> <li class="n-t3-e"><a title="some practical solutions on using css" href="http://www.zytrax.com/tech/css/workarounds.html" class="t-da">css notes</a></li> <li class="n-t3-e"><a title="css shortforms at a glance" href="http://www.zytrax.com/tech/css/shortcut.html" class="t-da">css short-forms</a></li> <li class="n-t3-e"><a title="css selectors and quick overview with links to the W3C specs" href="http://www.zytrax.com/tech/css/syntax.html" class="t-da">css overview</a></li> </ul> </li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/codes.htm" class="t-da">ascii codes</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/data_rates.htm" class="t-da">data rate stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/telephony/" class="t-da">telephony stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/mech/" class="t-da">mech. stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/protocols/hex.html" class="t-da">Dec>Hex>Bin</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/lang/" class="t-da">language stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/electronics/" class="t-da">electronic stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/rfcs/" class="t-da">rfc stuff</a></li> </ul> </li> <li class="n-t1-e"><a href="http://www.zytrax.com/security/" class="t-da">Security</a></li> </ul> </div>  </div>  <div class="l-c">  <p class="adv"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9419480011552853" data-ad-slot="9281933980"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <h1>Tech Stuff - CSS Techniques, Experiments and Wheezes</h1> <p>During our quest for a CSS based (table-less) layout in mid-2003 we ran a number of experiments to clarify our understanding (bit of an exageration <i>vague notion</i> would be more precise) and to explore potential browser problems, many of which are outlined <a href="layoutnotes.html" class="t-db">in our layout notes</a>. This page provides and documents the experiments we ran and some techniques we developed and adopted or adapted along the way. Use view source to look at the HTML and CSS code.</p> <p><b>Notes:</b> We recently had cause to check some of these experiments during 2006 (many of the originals were done in 2003) and found a number of solutions were clearly dependent on historic browser bugs and other aberant behaviours. We have updated a number - if we have missed any drop us an email if you have the time, energy or inclination.</p> <h3 id="contents">Contents</h3> <ul class="o-n"> <li><a href="#width" class="t-db">CSS width=100% or width:100% with a <div></a></li> <li><a href="#center" class="t-db">CSS - Center a page</a></li> <li><a href="#invisible" class="t-db">CSS Conditionally generating text</a></li> <li><a href="#border" class="t-db">CSS Regular Borders round adjacent items</a></li> <li><a href="#popout" class="t-db">CSS Pop-out/pop-down menus</a></li> <li><a href="ie-popout.html" class="t-db">CSS - All browsers (including MSIE) Pop-out/pop-down menus</a></li> <li><a href="#zero" class="t-db">CSS No margins on page</a></li> <li><a href="#align" class="t-db">CSS Align text left and right</a></li> <li><a href="#friendly" class="t-db">CSS Printer friendly pages</a></li> <li><a href="#spacing" class="t-db">CSS - Paras - Divs & Spacing & Cascades</a></li> <li><a href="#floats" class="t-db">CSS - Notes on float and clear</a></li> <li><a href="#zoom" class="t-db">CSS - Trivial Image zoom</a></li> <li><a href="#show-hide" class="t-db">CSS - Show/Hide text</a></li> <li><a href="../web/really.html" class="t-db">HTML Stuff</a></li> </ul> <p><b>Note:</b> Which DOCTYPE you are using may significantly affect the handling of various css attributes (i.e. quirks mode and all that brain-hurting stuff). In the pages below we use the following DOCTYPE declaration:</p> <pre class="g-c-s"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> </pre> <p><b>Note:</b> This page now uses an HTML5 DOCTYPE - well, non-DOCTYPE really of <b><!DOCTYPE html></b>.</p> <h2 id="width">Table width=100% in a <div></h2> <p>MSIE (5+ & 6+) can behave very badly when it hits a width="100% inside a <div>. It just forgets any margins and seems to assume the containing block is the screen i.e. the parent of the containing 'div'. Use 'view source' in your browser to see the minimal HTML and CSS in the example pages. The first set of examples all use position:relative (default) the solution for position:absolute is different.</p> <p>This <a href="table.html" class="t-db">page has placed a table inside a div</a> which is centered on the page using right and left hand margins. The inner table has no width attribute so all browsers display it correctly.</p> <p>This <a href="table_width.html" class="t-db">page has a width=100%</a> and works for all browsers including MSIE.</p> <p>This <a href="table_width_bad.html" class="t-db">page has a width=100%</a> and a DOCTYPE which places the browser in <b>quirks</b> mode (we removed the DTD URI reference) and blows away our margins in MSIE only (Gecko and Opera 7.x display it correctly) which seems to use the screen dimensions as the containing block (and gives 100% of this width), accepts the right hand margin from the containing 'div' but ignores the left margin (go figure).</p> <p>This <a href="table_width_ok.html" class="t-db">page places the table with a width="100%" inside a second 'nested' div</a> and fixes MSIE in both <b>quirks</b> and standards modes (and works for all other browsers). The 'dummy' div must have 'width:100%' and serves as wheeze to pass down the real margin constraints. It appears that the containing block (from which the constraints should be taken) is interpreted to be the 'parent' of the containing object (just our guess).</p> <h4>Position:Absolute</h4> <p>This page uses our solution above but adds <b>position:absolute</b> to the outer div <a href="table_width_abs.html" class="t-db">the enclosed table still has a width="100%" inside the second 'nested' div</a> and again blows away our margins in MSIE in both <b>quirks</b> and standards modes. Gecko displays it correctly in both modes. Opera truncates the table (loses the width=100%) in standards and <b>quirks</b> mode.</p> <p>This page creates a containing div with the <b>position:absolute</b> directive, the inner div declares the margins <a href="table_width_ok_abs.html" class="t-db">the enclosed table still has a width="100%" without the second 'nested' div</a>. MSIE and Gecko display correctly in standards mode, Gecko is OK in <b>quirks</b> mode but MSIE blows aways the margin. Opera 7.x truncates the table (loses the width=100%) in both modes.</p> <p>Finally we <a href="table_width_100_ok_abs.html" class="t-db">placed a width:100% in the inner div</a> (the containing div is unchanged). Wow. Blows away the width for MSIE and Gecko in Standards mode (Opera 7.x kinda OK). In quirks mode MSIE is perfect, Gecko blows the width and Opera 7.x truncates.</p> <p>Trust it all makes sense to you!</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="center">Center a page with CSS</h2> <p>CSS has no block level centering features, for example, center a table. The centering solution depends on whether the 'thing' you want to center has fixed or variable width. Use 'view source' in your browser to see the minimal HTML and CSS in the examples below.</p> <p>If you want variable width in the center it's simple just set the appropriate left and right margins on an enclosing div <a href="table_center.html" class="t-db">as in this page</a>.</p> <p>If you want a fixed width in the center it gets a bit trickier. Gecko and Opera 7.x can operate very happily with 'margin:auto;' and 'width:300px;' <a href="table_center_bad.html" class="t-db">as in this page</a> but MSIE chokes on it and aligns it on the left. It does not like 'auto' margins at all.</p> <p><b>humble pie:</b> When we wrote the above we thought it was correct. It was not. We had cause to look again about a year later and found that the DOCTYPE definition in the above page is incomplete - it was missing the url declaration and consequentially we should have said that MSIE in <b>quirks mode</b> does not handle it correctly. But if we add the url to the DOCTYPE <a href="table_center_url.html" class="t-db">it is OK for MSIE as well</a> . So there you go.</p> <p>The only way we have found to center a fixed width 'div' for all browsers is to absolutely position it in the center and then set the left margin to - (half the width) as in <a href="table_center_ok.html" class="t-db">this page</a>. Ugly but it works.</p> <p>Finally Rob Church has pointed out that MSIE behaves well with 'margin:auto;'if you use any XHTML DOCTYPE as well e.g.</p> <pre class="g-c-s"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> OR <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </pre> <p>The proof is <a href="table_center_xhtml.html" class="t-db">here</a>. Thanks Rob.</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="invisible">Conditionally generating a button with CSS</h2> <p>We wanted a technique to conditionally generate a button or marker on a page to show certain characteristics if they are present. You will see an example of these buttons on the right hand menu of this page.</p> <p>The button idea has a long and illustrious history - they are modifications of <a href="http://www.meyerweb.com/eric/css/examples/plat-buttons.html" class="t-db">Eric Meyer's</a> CSS implementation of the <a href="http://www.ragingplatypus.com/">Raging Platypus</a> design who got the idea from <a href="http://www.antipixel.com/blog/archives/2002/10/22/steal_these_buttons.html">Antipixel</a>. So there. We conditionally generate them on a page which has been modified to use improved CSS techniques using a <a href="syntax.html#selectors" class="t-db">CSS Selector</a>.</p> <p>The first 4 definitions below just build the button. The button technique uses a 'span' tag to split the style characteristics of a single list element (damned clever wish we'd thought of that). The enclosing list element style is set to 'visibility:hidden' by <a href="css_marker_wo.html" class="t-db">default</a> and the fifth CSS selector used to set 'visibility:visible' if this button is enclosed in a 'div' <a href="css_marker_with.html" class="t-db">which is only present in our revised layout schema</a>. The use of '#id' in the fifth selector allows us to expand the technique for other buttons and you could omit it if you have just one item. You can adapt the basic technique to reflect your conditions.</p> <p><b>Note:</b> The HTML construct uses 'ul' elements - it could use a table but there is less HTML mark-up in a list.</p> <pre class="g-c-s"> /* STYLE SHEET Fragment */ .b-b {list-style:none; margin:2px; font: 9pt Arial, sans-serif; padding:0 1em; } li.b-b-l {visibility:hidden; margin:10px 0; } .b-b-a {background:blue; color:white; text-decoration:none; border:1px solid black; padding:0 0.25em 0 0; } a.b-b-a span {color:blue; background:white; padding:0 0.25em 0 0.33em; text-decoration:none; } div.l-r #layout {visibility:visible;}  <div class="l-r"> <ul class="b-b"> <li class="b-b-l" id="layout"> <a class="b-b-a" href=""><span>CSS</span> Layout</a></li> </ul> </div> </pre> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="border">Regular Border round adjacent items</h2> <p>If you want to display a regular border round items, for example, items in a list or a series of paragraphs then allocating say a 4 pixel border on each side will result in a <a href="bad_border.html" class="t-db">thick line between items</a>. Note: This particular example uses a series of paragraphs enclosed in a 'div'. Use 'view source' in your browser to see the minimal HTML and CSS in the example pages.</p> <p>To fix the problem and provide a consistent border the trick is to leave one of the adjacent sides as a zero which <a href="almost_border.html" class="t-db">works great but leaves a gap on the last side</a>.</p> <p>So finally we fill in the gap using the containing block (in this case the div) <a href="good_border.html" class="t-db">which closes the border</a> for all browsers except Mozilla/Gecko and Opera which leaves a gap on the right of the bottom margin. This is because the calculation of the containing block <b>width</b> (the div.l-l) is computed as:</p> <pre class="g-c-s"> margin-left + border-left + padding-left + width (if defined) + padding-right + border-right + margin-right </pre> <p>(defined in CSS2 <a href="http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions" target="_blank" class="t-dd">Box model section 8.1</a> and <a href="http://www.w3.org/TR/REC-CSS2/visudet.html#q6" target="_blank" class="t-dd">Visual formatting model details section 10.3.3</a> in more detail. Both Gecko and Opera do the right thing whereas MSIE essentially ignores this model - does its own thing and in this case gets the right effect.</p> <p>To create a solution acceptable to all browsers you can use one of the following techniques:</p> <ol> <li><p>Create and apply <a href="good_border_all1.html" class="t-db">a style to the last paragraph</a> to let it close all the borders</p></li> <li><p>Since the problem is caused by calculation mismatches - do them manually by adding <a href="good_border_all2.html" class="t-db">to the div width</a>.</p></li> <li><p>Alternatively, since it's a width problem cauased by margins, padding and borders use alternative methods to create the padding/margin effects such as text-indent (or text-align) and height - then either use the same technique as above or use the containing div to <a href="good_border_all3.html" class="t-db">bound the three sides and the paragraphs to handle the bottom line</a>.</p></li> </ol> <p>Which, if any, makes the most sense will depends on your circumstances.</p> <p><b>Note</b> We sometimes use:</p> <pre class="g-c-s"> border:4px solid blue; border-width:4px 4px 0 4px; /* rather than */ border-width:4px 4px 0 4px; border-style:solid; border-color:blue; </pre> <p>The reason - the first is shorter and both give the same result (well if you ignore the bottom 4px which you probably want anyway) - however it's generally best to use the second method since it may be less confusing.</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="poput">Production CSS Pop-out/pop down Menus</h2> <p>Look Ma .. no javascript. We've used pop-out, pop-down CSS menus on this site since mid 2003 for Gecko and Opera, from end 2003 with up to four level of nesting - we conditionally generate a Lite Javascript version for MSIE pre version 7.0.</p> <h3>Gecko, WebKit, Trident and Opera CSS Menus - Multi-level</h3> <p>These menus don't work for MSIE 5/6 - hey blame Microsoft not us!</p> <p>Wish we could claim to have invented this stuff or found it out ourselves. Instead the inspiration (and some of the CSS) comes from a <a href="http://www.meyerweb.com/eric/css/edge/menus/demo.html" class="t-db">great article/demo from Eric Meyer</a>. Though Eric disengeniously suggests the key to the pop effect is the 'ul li:hover' sequence that's actually the simple and obvious bit, it's a lot more complex than that - or maybe (more likely) we are just stupid.</p> <p>Use 'view source' in your browser to see the minimal HTML and CSS in the example pages. This <a href="popup_1.html" class="t-db">page shows our first simplified version which we used during testing and development</a>. It has horizontal pop-out menus with three levels and works great in Opera 7+ and Gecko but does NOT work for MSIE since this browser does not support the child selector ('>') or the pseudo class 'hover' for anything but anchor tags.</p> <p>This page has limitations in that the 'top' and 'left' attributes are always relative to the containing block (in this case the initial <ul class="p-l1">). Consequently when the third level menu is pop'd it writes using the 'top:0' measure from the initial 'ul' top edge. The menus end-up giving the appearance of going up and down. This is not the effect we want. We were pretty certain this was our layout error not a browser limitation. OK but how do we fix it?</p> <p>The vertical menu works for Gecko (given the limitations noted above) but Opera chokes on it and will not allow us to get to the Third-2 menu item (if you get our drift). Again poor old MSIE does 'nuthin' at all.</p> <p>Back to the drawing board we go.</p> <p>Our <a href="popup_2.html" class="t-db">second version contains a number of changes</a> and conclusively proves that we have unwittingly gotten, and maintained, a relationship with our initial containing block (the <ul class="p-l1">) such that calculation of 'top' is relative to the top edge of this box. In order to display the expanding menu against the individual line item, say Horizontal-3, we have to force CSS to use the <li> 'top' property as the containing block.</p> <p>Experiment 3 was an attempt to <a href="popup_3.html" class="t-db">create a containing block that was too small</a> and perhaps use this to break apart the relationships (shows you how smart we are). We had to explicitly add 'position:relative;' in the containing 'div' to get it to use a 'top:100%' for position (which was a clue if only we could have spotted it). An interesting side effect for which we have absolutely no explanation is that if we add a <a href="popup_4.html" class="t-db">border to the 'div'</a> the roll-over effect no longer works. Another clue?</p> <p>Experiment 5 <a href="popup_5.html" class="t-db">is here</a> and was a simple attempt to try and get some visual clue as to what is going on. We kept our red border to the <div> (see above) and added a green one to the initial <ul> element. Interesting - because the roll-over effect works again. Go figure.</p> <p>With the clear impression now that the solution has something to do with 'position:relative;' we built experiment 6 <a href="popup_6.html" class="t-db">which forces a property of 'position:relative;' into every <li> element even if it's contained in a 'position:absolute;' block </a>(which is not exactly intuitive behaviour) and Whazam!!</p> <p>This experiment has the additional benefit that it works for both Opera 7.x and Gecko (do you need to ask about MSIE!).</p> <p>The remaining question is: Do we have a browser quirk - in which case we cannot use this for production sites or should things happen this way - in which case we can use it for production sites? We had to read lots of W3C documents and armed with some knowledge - always a dangerous thing - we moved in a generally forward direction.</p> <p>OK it's normal behaviour as defined <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning" class="t-db">in the CSS2 spec</a>. This spec says (we paraphrase) that the 'position:relative;' attribute establishes a new <b>containing block</b> from which descendant elements can take their positioning. Further the initial or default <b>position</b> attribute is <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position" class="t-db">static</a> not <b>relative</b> which to those of us brought up on the old DHTML positioning stuff is counter-intuitive. Seems that <b>relative</b> is kinda 'moveable' by using 'top', 'bottom' etc. as offsets from where it would normally be placed (an implicit target which is itself) but retains its original 'place-hole' (even if it has been moved), whereas <b>absolute</b> is positioned according to the same offsets but against a defined target (an explicit target - the containing block) and has no 'place-hole'. All pretty obvious really!</p> <p>So the reason the experiment finally works is: each nested <ul> uses 'position:absolute' which creates no 'place-hole', it is then positioned against the current <b>containing block</b> (typically a <li>), each <li> element is given an explicit 'position:relative' attribute (which overrides its default 'static') and allows it to become a <b>containing block</b>. Presumably its 'place-hole' exists but is <b>relative</b> to its <b>absolutely</b> positioned <ul> and hence is floating in the 'ether' until made visible. Since each <li> is now a <b>containing block</b> this allows us to position (using 'top', 'left' etc.) further menu levels using it as a base. So there. Clear as mud!</p> <h3>Vertical CSS Menus</h3> <p>Well it ain't over yet. We have some top menu/banner stuff that was placed inside a table and survived our initial conversion to CSS layout due simply to reasons of laziness. We wanted to see what would happen <a href="popup_7.html" class="t-db">whe we placed a CSS pop-up inside table</a>.</p> <p>Mmmmmmm! Very interesting.</p> <p>The problem is that to force the menu items onto a single line inside the <b><divs></b> (used to create <b>containing blocks</b>) we used the 'display:inline' attribute which (as any fool - except us - knows) immediately invalidates the 'top' attribute and hence the pop-up effect does not work correctly. The positive part is that the HR does not move and hence the popups do not redraw the page. Nice try but no cigar.</p> <p>To fix the alignment problems we replaced the 'display:inline' with a <a href="popup_8.html" class="t-db">'float:left'</a>. The table/cell has no 'width' attribute. When the popup/hover changes the width of the cell the float directive seems to be stronger and redraws the table cell vertically and we get a real mess. The HR bar moves indicating that we will get a page re-draw. Allocating a <a href="popup_9.html" class="t-db">width attribute of, say 50%, is one solution</a> to this problem. But again we will get a page re-draw.</p> <p>After some more experimentation we decided that life was too short to continue with this approach and so we decided to replace the banner table with a table-less structure. <a href="popup_12.html" class="t-db">This was our first attempt</a>. OK so it works for Gecko and Opera 7.45+ (versions of Opera prior to that quoted did not support the feature and .. need you even bother asking about MSIE).</p> <p>Now we apply our 90% width constraint <a href="popup_13.html" class="t-db">and some alignment</a>. Again Gecko and Opera 7.45+ but not - what a surprise - MSIE.</p> <p>We add our <a href="popup_14.html" class="t-db">logo and some crude positioning</a> (with a <br>!! - the production version uses 'padding' to control vertical spacing instead) and we have a solution for Gecko and Opera 7.45+.</p> <p>To summarize: We appear to have a horizontal pop-out that works for Gecko and Opera 7+ and a vertical solution for Gecko and Opera 7.45+ only. But it will degrade in all other browsers to a non pop-out. Is this enough?</p> <p>Since Gecko is still a pathetically small part of the market (no we don't know why either) there really is no way to justify the investment. But the real reasons we have done it are:</p> <ul> <li>We want to support the Open Source nature of the Gecko browser.</li> <li>The technique uses STANDARD W3C CSS2 features - it SHOULD work on EVERY reputable browser (currently only Gecko and mostly Opera7+).</li> <li>We conditionally generate pages based on browser detection in our Apache server. So we can, and do, generate unique pages for each main browser type that we support. <a href="../web/browser_sniffing.html" class="t-db">We describe our technique in this note.</a></li> </ul> <p>Are we going to use these techniques on our site? After all this hard work - darned right we are!</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="ie-popout">All Browsers CSS Pop-out/pop down Menus</h2> <p>In April 2006 we revisited pop-ups for some new developments and again felt that shudder of disgust that we still had Javascript for simple navigation functions. MSIE 7 (beta in April 2006 if you are using XP which we are not) promised clean CSS pop-ups but we were still stuck with MSIE 5/6 - so we went in search of a solution - and blow me, we found one. Its based on two principles - MS <a href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp" class="t-db">Conditional Comments</a> which allows us to override standard definitions selectively within the target browser and a very clever insight in <a href="http://www.codeproject.com/html/purecssmenus.asp" class="t-db">this article by Venimus for the codeproject</a>. So we figured we could get rid of most of that residual Javascript. This is what we did.</p> <p>The first series of experiments were to try and find the minimal CSS needed to get pop-ups to work in a MSIE environment - essentially trying to find the limitations in the MSIE CSS model by observation. <a href="tests/ie-popout-100.html" class="t-db">This page starts from the experimental layout described in the article above</a> and works for MSIE 5.5/6, MSIE 7, Opera (8.54) and Gecko (but with an annoying box below the menu item) using a DOCTYPE HTML 4.0 without a URL - we added a </a> tag to terminate the enclosing anchor tag sequence for the inner table. The only other item we added was an absolutely positioned div under the menu to allow us to test and interaction problems. MSIE completly ignores the size value of the font (defined in the .l-f style) but seems to handle everything else correctly.</p> <p>Simply removing the enclosing table structure <a href="tests/ie-popout-101.html" class="t-db">appears to have no effect on the layout</a>.</p> <p>Adding a paragraph and some modest renaming of class fields <a href="tests/ie-popout-102.html" class="t-db">appears to have no effect on the layout</a>.</p> <p>MSIE - when display:block is applied to .c-table and .two classes <a href="tests/ie-popout-106.html" class="t-db">a subsequent attempt to change the styles to display:none;</a> has no effect and the pop-ups will work when the mouse is over the pop-up area (but only after the first pop-up) but applying the style to <a href="tests/ie-popout-105.html" class="t-db">.first .c-table cancels this effect</a>. Our guess would be that exactly similar effects are cancelled but effects applied to slightly different CSS definitions are triggered only at certain times.</p> <p>A <a href="tests/ie-popout-108.html" class="t-db">two level pop-up menu example</a> - but still vulnerable to the mouse over pop-out area (but only if you exit the second-level pop-up area - if you remove the mouse via the first pop-out level the effect is cancelled - so we have are not triggering the same re-draw mechanisms as the first level). This <a href="tests/ie-popout-108.html" class="t-db">minor change using a display:none div</a> to trigger the pop-up process makes this visible. The surrounding box remains visible any mouse movement into the box will activate the pop-up.</p> <p>This experiment was designed to see what menu bar layout limits exist. The main menu was placed in a table and did not work until we wrapped the whole structure in a div once again and we fooled around to get vertical bar separation in the menu line items. This page uses a <a href="tests/ie-popout-15.html" class="t-db">DOCTYPE HTML 4.0 transitional and no URL</a> - works for MSIE 6, Gecko (vertical only layout) and Opera (but leaves a bar at the bottom after the hover event). Annoying artifact in MSIE when hovering over a part of the first menu (same effect if horizontal or vertical). <a href="tests/ie-popout-16.html" class="t-db">DOCTYPE HTML 4.0 and loose.dtd URL</a> - Gecko (vertical only layout) is perfect, MSIE does not redraw the screen correctly and Opera pops but menu disappears on hover. <a href="tests/ie-popout-17.html" class="t-db">with a transitional XHTML 1.0 DOCTYPE</a> - works for MSIE 6, Gecko (vertical only layout) but not Opera (pops but menu disappears on hover). Again annoying artifact in MSIE when hovering over a part of the first menu (same effect if horizontal or vertical). The page does not validate as XHTML 1.0 because the table is nested in an a tag which is not allowed - so perhaps makes this test moot.</p> <p>In all the above cases the area covered by the pop-up menu is constantly live which does not allow placing of any active links in this area - an unacceptable solution. However we have a solution which works for MSIE and Gecko with the same markup (vertical menus only) but not for Opera which is not really acceptable since it leaves this fine browser in the cold. Further the positioning of the menu items - horizontal or vertical is pretty minimal at best and would probably require some conditional CSS generation of code.</p> <p>At this stage we had no idea where to go next.</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="zero">Setting Zero Margins on a page with CSS</h2> <p>OK so you got one of those pages with <body topmargin="0" marginwidth="0" leftmargin="0" marginheight="0"> (don't we all) and either its just been bounced by the W3C Page Validator as not being valid serbo-croat HTML (or anything else known to mankind) OR you are just plain offended by using all those deprecated attributes in a single line.</p> <p>Just set the 'body' 'margin' and 'padding' attrubutes in the style sheet to 0 (remember you don't need a unit with 0, after all 0 = 0 - right?).</p> <pre class="g-c-n"> // head stuff <style type="text/css">  </style> </pre> <p>Goodness its even shorter than the invalid stuff - does life get better?</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="align">Aligning text on the left and right with CSS</h2> <p>So your layout designer wants the left hand text left aligned and some text on the same line to be right aligned. Mmmmm....</p> <p>Add a class definition to the item you want on the RIGHT (we called it 'right' - original or what) and define it's HTML first. Class 'right' contains a float:right attribute. <a href="align_both.html" class="t-db">see an example</a> use view->source to see the minimal css and html. This works perfectly for MSIE 6 but not Gecko which makes a real pig's ear of the whole thing.</p> <pre class="g-c-n"> <style type="text/css">  </style>  <div class="dummy"> <h2 class="right">Right Title</h2> <h2>Left Title</h2> <p>just a line of normal text</p> <p class="right">Text on right</p> <p>Text on left</p> </div> </pre> <p>To fix the problem for Gecko add a 'margin:0px;' statement in 'right' (experiment with the value) and all is well. <a href="align_both_gecko.html" class="t-db">see an example</a> use view->source to see the minimal css and html. We think this is a Gecko bug but you <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#q24" class="t-db">can read the W3C description</a> and make your own mind up.</p> <pre class="g-c-n"> <style type="text/css">  </style>  <div class="dummy"> <h2 class="right">Right Title</h2> <h2>Left Title</h2> <p>just a line of normal text</p> <p class="right">Text on right</p> <p>Text on left</p> </div> </pre> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="friendly">Printer Friendly pages with CSS</h2> <p>We provide a printer friendly button on each screen that allows a user to view the central content only - no left or right hand menus and no advertising. Selecting the browser's print feature will print what you see. We use style sheets with a couple of embedded lines of <a href="../web/ssi.htm" class="t-db">Apache SSI</a> to conditionally generate the right CSS definitions. We've seen articles about doing this with PHP or Javascript - just a lot easier for us to use SSIs. We now provide a print style sheet to enable the same effect from any page. In both cases the print output is the same it's just the screen view that changes.</p> <p>Using these techniques is made trivial if the pages are organised into distinct divs the enclose the major sections. We did this as a happy by-product of moving to <a href="layoutnotes.html" class="t-db">CSS 3 column liquid layouts</a> many years ago.</p> <h3>Screen Printer Friendly View:</h3> <p>We use a top banner, three central columns and a footer. All are enclosed in <div>s. By simply changing the definition of the divs we can easily remove the left and right columns and make the central columns full width. To make it even simpler we send the same page content again - just inhibit (visibility:hidden) certain divs.</p> <p><b>Note:</b> We originally used the <b>visibility:hidden;</b> attribute to achieve this effect but the div's occupied space and Gecko decided that hidden did not apply to printing so we finally figured out that <b>display:none;</b> was much more effective.</p> <p>This is the CSS and HTML for a three column layout.</p> <pre class="g-c-n"> <style type="text/css">  </style>  <div class="center">  </div> <div class="left">  </div> <div class="right">  </div> </pre> <p>When we generate printer friendly pages we modify only the CSS as follows:</p> <pre class="g-c-n"> <style type="text/css">  </style>  <body> <div class="center">  </div> <div class="left">  </div> <div class="right">  </div> </body> </pre> <p>OK so it wastes a bit of bandwidth by sending down the left and right hand menus that will never be displayed but it took us 30 minutes to implement - site wide.</p> <p>The 'printer friendly' feature (on the right menu just below the buttons) is simply an 'anchor' tag with a query string added as shown below.</p> <pre class="g-b-n"> <a href="url/of/this/page.html?pf=yes">printer friendly</a> </pre> <p>On the server we use an SSI conditional expression to generate the conditional CSS like this:</p> <pre class="g-c-n"> <style type="text/css">  /* SSI */ .left {display:none;} .center {margin:5px;} /* in-line */ .right {display:none;}  .left {position:absolute;top:60px;left:6px;width:110px;} .center {margin:0 160px 0 125px;} /* in-line */ .right {position:absolute;top:60px;right;6px;width:150px;}  //--> </style> </pre> <p>In practice our SSI is a little more complex because we also generate browser specific CSS but the principle is the same as above. If you want to undestand Apache SSI (Server Side Includes) <a href="../web/ssi.htm" class="t-db">you can read about it</a>. And if you don't - well that's OK too.</p> <h3>Printer Style Sheet:</h3> <p>We now use a printer style sheet to achieve the same effect as shown above but which is effective from every page irrespective of the use of <i>printer friendly</i> feature. The printer style sheet is a separate style sheet witha media=printer value in the style sheet declaration and is shown below:</p> <pre class="c-g-s"> <style type="text/css" media="print">  </style> </pre> <p>These definitions override the various attributes - not the entire style - defined in the normal (screen) stylesheet. If an attribute does not change it can be omitted, equally every attribute that is different must be defined in the media style sheet.</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="spacing">CSS - Paras - Divs & Spacing & Cascades</h2> <p>We don't use CSS every day so we forget stuff - frequently. We forgot this one recently. This page shows a <a href="para-div-1.html" class="t-db">simple list of items</a> e.g. a menu all neatly enclosed in paragraphs. Use <b>view->source</b> in your browser to look at the minimal CSS and HTML in the sample pages.</p> <p>So we want to tighten up the spacing between elements. Being lazy human being we thought - just slap a <b>div</b> with some margins and padding <a href="para-div-2.html" class="t-db">round the paragraphs</a> and the CSS cascade will do the job. It does not.</p> <p>We forgot the <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#box-gen" target="_blank" class="t-db">CSS Box model</a> which says that while the <b>div</b> has box properties - so does each <b>para</b> and the <b>para</b> does not inherit. There are four possible solutions (well actually there are more than that but ...):</p> <ol> <li><p>Define a <a href="para-div-4.html" class="t-db">class and apply to each para</a></p></li> <li><p>Use a <a href="para-div-3.html" class="t-db">single para and <b>br</b></a></p></li> <li><p>Apply a <a href="para-div-5.html" class="t-db">class directive to the <b>p</b> tag</a></p></li> <li><p>Be very lazy and use the <a href="para-div-6.html" class="t-db">anonymous box</a> (one which is not enclosed in <b>para</b> tags and which consequentially does inherit from the div) and <b>br</b> between lines (for good measure we added a <b>line-height</b> attribute to the <b>div</b> to tighten up spacing still further.</p></li> </ol> <p>So there you go - which one is most useful depends on your context, your willingness to type stuff and the color of your socks that day!</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="floats">CSS - Notes on float and clear</h2> <p>We recently got caught with the undesired effects from a float in a div used in a CSS pop-up menu bar. Which lead to minor ruminations about when is the float effect valid and particularly how do you get rid of it.</p> <h3>Float in a div with position:absolute</h3> <p>Floats in an absolutely positioned div have no residual effect outside the div. The absolute position has taken the whole div contents out of the document flow so they cannot effect anything else in the page. Floats in these divs are harmless and terminate with the closing div.</p> <h3>Float in a div with position:relative</h3> <p>When the float is defined in a div with either no position (default is static) or position:relative you can have problems in terminating the float effect - the float effect hangs around forever until explicity canceled by a clear:none attribute. Since float is not inherited this can be confusing and counter-intuitive - but when you consider that float affects the following structures it becomes more sensible. Take the example below which illustrates the effect in action:</p> <pre class="g-c-s"> ... <style type="text/css"> .bigdiv {... position:relative; clear:both; ...} .menubar {...} .menuitem {... float:left; ...} </style> ...  <div class="bigdiv"> ... <div class="menubar"> ... <div class="menuitem"> ... </div> <div class="menuitem> ... </div> </div>   </div> </pre> <p>The HTML below the end of the .menubar div is still subject to the efects of the float:left. To clear it you must explictly define clear:both in a new structure as shown below:</p> <pre class="g-c-s"> ... <style type="text/css"> .bigdiv {... position:relative; clear:both; ...} .menubar {...} .menuitem {... float:left; ...} .clearfloat {... clear:both; ...} </style> ...  <div class="bigdiv"> ... <div class="menubar"> ... <div class="menuitem"> ... </div> <div class="menuitem> ... </div> </div> <div class="clearfloat">   </div> </div> </pre> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2 id="zoom">CSS - Trivial Image zoom</h2> <p>We had need for a image zoom feature. The functionality required must use a single image (to save bandwidth) but be able to display it at multiple (well if you insist - two actually) levels of resolution, it must use CSS (not Javascript) and finally since this feature would be used on multiple pages with varying image sizes we wanted something that would not require explicit definition of an image size in either the CSS or the HTML. There are a number of solutions to this problem around the web including <a href="http://randsco.com/_miscPgs/cssZoomPZ3.html" target="_blank" class="t-dd">this one which is very complete and comprehensive</a>. But they all looked a tad too complex for our simple needs - and minds. So we created this kludge. <b>Warning:</b> It does not validate as valid HTML 4.01 or even serbo-croat HTML so if that idea offends your sensibility - go for the one above which does - but it does work for Gecko, MSIE 6 and, with a trivial change, for Opera.</p> <p>The functionality uses a single image which can be displayed at a particular resolution (thumbnail concept - using a percentage of < 100%) to keep the display area used down to a minimum but when moused over a larger image will pop-up without a screen redraw - again driven by the resolution percentage (=> %100). The demo pages use a table to enclose the picture and some text but this plays no part in the solution - it could be any suitable formatting structure.</p> <p>The CSS works for MSIE by enclosing the image <u>and a hidden div (which contains the expanded image) inside a dummy anchor tag</u> which has the unfortunate side effect of making the W3C page validator extremely unhappy. <a href="tests/pop-up-image1.html" class="t-db">This page works for MSIE and Gecko</a> but not for Opera and fully satisfies our needs since it requires no image specific width attribute. It also shows some modest positioning with respect to the containing object (the div.container). Unfortunately Opera requires a width attribute to display images and defining an explicit width in the enclosing div.container will choke MSIE but defining a width in the enclosing table cell and giving the <a href="tests/pop-up-image2.html" class="t-db">div.container a width:inherit cures the problem</a> and works for MSIE, Gecko and Opera. Since the enclosing table cell can be set to any value capable of containing the biggest image the solution is reasonably generic and still meets our needs.</p> <p><b>Note on images sizes:</b> Compressing an image in the browser causes little degradation in quality (Opera is not so good at this as MSIE and Gecko) - but expanding the image past its 100% value depends on how much compression was applied when the image was created. There are two possible strategies:</p> <ol> <li>Apply no (or very little) compression to the image and it can be expanded to 130 - 150% with modest or no degradation in visual quality - depending on its content and use.</li> <li>Set the expansion at 100% and use jpg compression to reduce the size until visible degradation starts to occur - in general this technique will yield smaller image sizes.</li> </ol> <p>If you want to add a caption to the zoomed image - <a href="tests/pop-up-image3.html" class="t-db">as in this page</a> - just add the caption text and formatting inside the invisible div.</p> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <h2><a id="show-hide"></a>CSS - Show/Hide Text</h2> <p>We tend to be a bit wordy. We assume that everyone likes to know all the gory details of why we do stuff. Some folks just want the skinny. No messin' around. So we finally got round to adding a show/hide feature which we will use, sparingly, for new pages.</p> <p>Bad news. It is not possible to show/hide permanently via CSS alone you need a bit of javscript as well. But if it's acceptable to hover the mouse to expand you could do the whole thing with only CSS.</p> <p>The <a href="tests/show-hide.html" class="t-db">example page</a> (use your browser's 'view source' feature to look at the minimal CSS and JS) provides:</p> <ol> <li><p>Click the <b>show info</b> to display the hidden text. Click the <b>hide info</b> to remove the text.</p></li> <li><p>Two divs are used to allow removal of the <b>show info</b> (and associated text). To simplify the JS function we define the <b>id</b> attribute of the first div to be the same as the second with a trailing 'a' thus 'hide' is the <b>id</b> of the second div and 'hidea' is the name of the first. We could equally have used a second parameter to the function <b>toggle</b>.</p></li> <li><p>We use a single JS function <b>toggle</b> with a single calling parameter (the second div name) that simply tests the value of the <b>display</b> CSS attribute and toggles it between the values <b>block</b> (display) and <b>none</b> (hide). The first div is toggled to the opposite value. Note: The default value of <b>display</b> is '', which is 'block'(display) so no style directive is required for the first div. Using the <b>id</b> name as a call parameter simply means you can have any number of these hide/show sections within a page.</p></li> <li><p>The JS function supports only DOM1/2/3 - MSIE 5.5, 6, 7 and 8, Gecko (FF, etc. - all), Opera (6+), WebKit (Safari, Chrome, etc. - all) - and older MSIE versions by making a simple test for <b>document.getElementByID</b>. Anything else (is there anything else?) - tough.</p></li> <li><p>Neither div has a class name which means it inherits all its properties from the nested div so this solution can be used on any page which has this structure and will take on any nested characteristics, such as, font, size, color etc.. It does, however, mean that you need to use the style attribute in the div tag to apply essential properties.</p></li> <li><p>The example shows use of two style attributes (<b>display</b> and <b>border</b>) to show a method of identifying the expanded text if required. Simply remove <b>border</b> from the style attribute if this is not needed.</p></li> </ol> <p><a href="#contents"><img class="i-u" src="../../../images/go_up.gif" alt=""></a></p> <hr> <p class="p-m-n"><br>Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or <a href="javascript:mailus('info-support','zytrax.com','Support Issue')" class="t-db">info-support at zytrax</a>. You will have a warm inner glow for the rest of the day.</p>  </div> <div class="l-l">  <div class="n-l"> <p class="c-g t-b t-o m-h5 t-r">Tech Stuff</p>  <ul class="n-l1p"> <li class="n-l1p-e"> <a href="http://www.zytrax.com/tech" class="n-l-c">tech home</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Digital Audio - primers, calculators, equalization, frequency tables, file formats, glossary - a mere splash in the ocean" href="http://www.zytrax.com/tech/audio/" class="n-l-c">audio stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/sound.html" class="n-l-f">sound primer</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/digital-sound.html" class="n-l-f">digital primer</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/audio.html" class="n-l-f">note frequencies</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/equalization.html" class="n-l-f">eq, meters & fft</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/calculator.html" class="n-l-f">calculators</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/formats.html" class="n-l-f">files & codecs</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/glossary.html" class="n-l-f">glossary</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Browser IDs, SSIs, Apache Configuration, regular expressions" href="http://www.zytrax.com/tech/web/" class="n-l-c">web stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/browser_ids.htm" class="n-l-f">browser ids</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/mobile_ids.html" class="n-l-f">mobile_ids</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/env_var.htm" class="n-l-f">apache env vars</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/ssi.htm" class="n-l-f">apache ssi</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="n-l-f">css popout menus</a></li> <li class="n-l2-e"><a title="most of those annoying HTML entity codes that we forget all the time" href="http://www.zytrax.com/tech/web/entities.html" class="n-l-f">html entities</a></li> <li class="n-l2-e"><a title="Decimal to Hexidecimal to Binary conversion - even Octal!" href="http://www.zytrax.com/tech/protocols/hex.html" class="n-l-f">dec > hex > bin</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a href="http://www.zytrax.com/tech/dom/" class="n-l-c">dom stuff</a><br> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/dom/guide.html" class="n-l-f">dom guide</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/dom/w3c_dom.html" class="n-l-f">page explorer</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/dom/navigate.html" class="n-l-f">dom navigation</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="CSS is about a lot more than STYLE. Wheezes, table-less layouts, CSS pop-ups, CSS Shortcuts" href="http://www.zytrax.com/tech/css/" class="n-l-c">css stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/layoutnotes.html" class="n-l-f">css liquid design</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="n-l-f">css popout menus</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/workarounds.html" class="n-l-f">css notes</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/syntax.html" class="n-l-f">css syntax</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/shortcut.html" class="n-l-f">css short-forms</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="includes PHP, Ruby and some Java stuff (all about obscure solutions to stupid problems)" href="http://www.zytrax.com/tech/lang/" class="n-l-c">language stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="quick overview 'cos we always forget - not that we ever knew much - now includes a nifty browser-based tester" href="http://www.zytrax.com/tech/web/regex.htm" class="n-l-c">regex stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="rfc ordered by subject" href="http://www.zytrax.com/tech/rfcs/" class="n-l-c">rfc stuff</a> <ul class="n-l2"> <li title="dns rfcs" class="n-l2-e"><a href="http://www.zytrax.com/books/dns/apd/" class="n-l-f">dns rfcs</a></li> <li title="ldap rfcs" class="n-l2-e"><a href="http://www.zytrax.com/books/ldap/apc/" class="n-l-f">ldap rfcs</a></li> <li title="ipv6 rfcs" class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html#rfcs" class="n-l-f">ipv6 rfcs</a></li> <li title="tls/x.509 rfcs" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/ssl.html#rfcs" class="n-l-f">tls/x.509 rfcs</a></li> <li title="some other subjects - we only update these when we are active - some lists are consequently long in the tooth" class="n-l2-e"><a href="http://www.zytrax.com/tech/rfcs" class="n-l-f">other rfcs</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="TCP/IP, IPv4, IPv6, ISDN, LAN, VoIP, ITU Multi-Media" href="http://www.zytrax.com/tech/protocols/" class="n-l-c">protocol stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/tcp.html" class="n-l-f">tcp, udp, icmp</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/ip-classes.html" class="n-l-f">ipv4</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html" class="n-l-f">ipv6</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/isdn/" class="n-l-f">isdn</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/ssl.html" class="n-l-f">ssl/tls/x.509</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/ss7/" class="n-l-f">ss7 &sigtran</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/lan/" class="n-l-f">802.3 lan</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="PC Parallel Ports, LAN wiring, RS232, Centronics, DIN" href="http://www.zytrax.com/tech/layer_1/" class="n-l-c">cable stuff</a> <ul class="n-l2"> <li title="10baseT, 100base-TX/T4, 1000baseT, 10Gbase-T, RJ45, STP" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="n-l-f">lan pinouts</a></li> <li title="mixing telephony and 802.3 LAN can be done on cat5/5e/6 wiring" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/mixed.html" class="n-l-f">lan & telephone</a></li> <li title="RS 232 pinouts on db9, db24 and T1" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="n-l-f">rs232 pinouts</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/heavy.htm" class="n-l-f">serial primer</a></li> <li title="USB 2.0, 3.0, 3.1 and 3.2 plus Firewire (i.Link) IEE 1394" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/serial.html" class="n-l-f">usb & firewire</a></li> <li title="some information about display and monitors/console interfaces inclusing VGA, HDMI, DVI and Thunderbolt" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/monitors.htm" class="n-l-f">displays</a></li> <li title="modular jack is the term we should use for those telephone and lan connectors" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/cables_jacks.htm" class="n-l-f">modular jacks</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="10baseT, 100base-TX/T4, 1000baseT, 10Gbase-T, RJ45, STP" href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="n-l-c">lan wiring</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="DB9, DB25 pinouts, RJ45 serial, T1 and RS standards alphabet soup" href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="n-l-c">rs232 wiring</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Decimal to Hex and Binary conversion table - even a description of Octal!" href="http://www.zytrax.com/tech/protocols/hex.html" class="n-l-c">dec > hex > bin</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="character sets ain't as simple as they look" href="http://www.zytrax.com/tech/codes.htm" class="n-l-c">character sets</a> <ul class="n-l2"> <li title="pretty much all the characters sets in the known universe including utf-7, 8 and 16" class="n-l2-e"><a href="http://www.zytrax.com/tech/characters/" class="n-l-f">character sets</a></li> <li title="ascii variant of international reference alphabet 5 (ira5)" class="n-l2-e"><a href="http://www.zytrax.com/tech/codes.htm" class="n-l-f">ascii codes</a></li> <li title="international reference alphabet 5 (ascii's cousin)" class="n-l2-e"><a href="http://www.zytrax.com/tech/ia5.html" class="n-l-f">ia5 codes</a></li> <li title="all that ™ & © stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/web/entities.html" class="n-l-f">html entities</a></li> <li title="silly page containing a bunch of fonts in various sizes including your PCs defaults" class="n-l2-e"><a href="http://www.zytrax.com/tech/web/fonts.html" class="n-l-f">web fonts</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="The T series, E series and J series and then all that optical stuff (OC-12 etc.)" href="http://www.zytrax.com/tech/data_rates.htm" class="n-l-c">data rate stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Even us electronic guys gotta know how to screw it together, if you get our drift" href="http://www.zytrax.com/tech/mech/" class="n-l-c">mechanical stuff</a> <ul class="n-l2"> <li title="fastener (screw) head styles - surprising number of choices" class="n-l2-e"><a href="http://www.zytrax.com/tech/mech/heads.htm" class="n-l-f">head styles</a></li> <li title="threads for imperial (UNF, UNC) & metric sizes" class="n-l2-e"><a href="http://www.zytrax.com/tech/mech/threads.htm" class="n-l-f">threads</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="A collection of howtos including Samba3 as PDC, FreeBSD firewalls" href="http://www.zytrax.com/tech/howtos/" class="n-l-c">howto stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="A collection of survival guides - quick overviews - to popular software" href="http://www.zytrax.com/tech/survival/" class="n-l-c">survival stuff</a> <ul class="n-l2"> <li title="tls and x.509 (ssl) certificates - warning: headache inducing stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/ssl.html" class="n-l-f">ssl/tls/x.509</a></li> <li title="Abstract Syntax Notation. 1 (ASN.!) and Distinguished Encoding Rules (DER) - not for the faint hearted. Pass the pain medication, we feel a headache coming on." class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/asn1.html" class="n-l-f">ASN.1 & DER</a></li> <li title="Kerberos is great - but tough, oh my, tough stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/kerberos.html" class="n-l-f">kerberos</a></li> <li title="We've used postfix for years but always forget which of the 27 million parameters to use" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/postfix.html" class="n-l-f">postfix</a></li> <li title="Symetric, asymetric, MACs, hashes - eye watering stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/encryption.html" class="n-l-f">encryption</a></li> <li title="Just what time is it in Kuala Lumpur, and what's that got to do with cron?" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/cron.html" class="t-db">cron</a></li> <li title="Gotta love wxWidgets - free, fantastic, flexible - but hard to see the wood for the trees sometimes" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/wxwidgets.html" class="n-l-f">wxWidgets</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Our wireless overview, Calculators, Fresnel zones, links to 'heavy' stuff, some early 802.11 stuff (mostly wi-fi related)" href="http://www.zytrax.com/tech/wireless/" class="n-l-c">wireless stuff</a> <ul class="n-l2"> <li title="our irreverent general intro to wirelss - purist will not like this page" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/intro.htm" class="n-l-f">overview</a></li> <li title="wireless calculators for system budgets, free-space loss, fresnel effects and a bunch of other stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/calc.htm" class="n-l-f">calculators</a></li> <li title="fresnel effect explanation - well, we can understand it" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/fresnel.htm" class="n-l-f">fresnel effects</a></li> <li title="our outrageously biased description of frequency hopping versus direct sequence for spread spectrum" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/fh_ds.htm" class="n-l-f">fh vs ds</a></li> <li title="some terminology covering 802 standards and modulation techniques" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/soup.html" class="n-l-f">wireless soup</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Pinouts - USB, DIN, Firewire, VGA, DVI, HDMI, DisplayPort and Thunderbolt, I/O interface speeds, Screen sizes including HD" href="http://www.zytrax.com/tech/pc/" class="n-l-c">pc stuff</a> <ul class="n-l2"> <li title="din and mini-din for older PCs" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/din.htm" class="n-l-f">din & mini-din</a></li> <li title="802.3 LAN stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="n-l-f">802.3 lan</a></li> <li title="connection of monitors has changed over the years from clunky VGA to svelte HDMI - all the pinouts you could hope for" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/monitors.htm" class="n-l-f">monitor pinouts</a></li> <li title="serial (db9, db24) connections - slow but trusty" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="n-l-f">serial stuff</a></li> <li title="usb pinouts and descriptions of power levels for usb 1, 2 and 3 - also includes firewire" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/serial.html" class="n-l-f">usb & firewire</a></li> <li title="pc interfaces are changing and getting faster - we can never keep up - list of interfaces and their speeds" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/interfaces.html" class="n-l-f">pc interfaces</a></li> <li title="we get confused about most things - just what is 1080p - pc and tv screen resolution table with some explanations" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/resolution.html" class="n-l-f">screen resolutions</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Electronic glossary, some old experiments with 3.3/5V protection and early BGA designs" href="http://www.zytrax.com/tech/electronics/" class="n-l-c">electronic stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="ragbag collection of links that we publish from time to time - maybe useful, maybe not" href="http://www.zytrax.com/links" class="n-l-c">tech links</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Our DNS and LDAP for Rocket Scientists guides" href="http://www.zytrax.com/books" class="n-l-c">open guides</a> <ul class="n-l2"> <li title="dns for rocket scientists" class="n-l2-e"><a href="http://www.zytrax.com/books/dns/" class="n-l-f">dns guide</a></li> <li title="ldap for rocket scientists" class="n-l2-e"><a href="http://www.zytrax.com/books/ldap/" class="n-l-f">ldap guide</a></li> </ul> </li> </ul> <p class="t-r"> <a title="RSS (2.0) Feed - right click on icon, select 'Copy Link URL' or 'Copy Shortcut', paste into RSS Feed Reader, or drag and drop into RSS Feed Reader" href="http://www.zytrax.com/zytrax.rss" class="n-l-c"><img class="w-32 center" src="http://www.zytrax.com/images/rss.png" alt="RSS Feed Icon"></a> </p> <p class="p-b-h t-r">If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as <a href="http://www.mozilla.org" class="t-db">Firefox</a></p> </div> </div> <div class="l-r">  <div class="w-150">  <p class="c-g t-b t-o m-h8">Search</p> <form class="f-b-n" method="get" action="http://www.google.com/custom" target="_top"> <table> <tr> <td style="white-space: nowrap"> <input type="hidden" name="domains" value="www.zytrax.com"> <input class="b-lg" type="text" name="q" size="16" maxlength="255" value=""> </td></tr> <tr> <td style="white-space: nowrap"> <table> <tr> <td> <input type="radio" name="sitesearch" value="" checked="checked"><span class="t-s">web</span> </td> <td> <input type="radio" name="sitesearch" value="www.zytrax.com" ><span class="t-s">zytrax.com</span> </td> </tr> </table> <input class="b-lg" type="submit" name="sa" value="Google Search"> <input type="hidden" name="client" value="pub-9419480011552853"> <input type="hidden" name="forid" value="1"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="hidden" name="oe" value="ISO-8859-1"> <input type="hidden" name="safe" value="active"> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:355;L:http://www.zytrax.com/images/zytrax-info-google.gif;S:http://www.zytrax.com/tech;FORID:1;"> <input type="hidden" name="hl" value="en"> </td></tr></table> </form>   <div class="t-h"><p><span class="t-g">Share</span></p> <div class="t-h-1"> Icons made by <a href="https://www.flaticon.com/authors/icomoon" title="Icomoon">Icomoon</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div></div> <a href="http://www.facebook.com/share.php?u=http://www.zytrax.com/tech/css/workarounds.html&h=Tech%20Stuff%20-%20CSS%20Techniques%20and%20Workarounds"><img class="w-32" title="add page to facebook" src="http://www.zytrax.com/images/facebook.png" alt="share page via facebook"></a> <a href="http://twitter.com/home/?status=Useful%20page%20http://www.zytrax.com/tech/css/workarounds.html"><img class="w-32" title="tweet this page" src="http://www.zytrax.com/images/twitter.png" alt="tweet this page"></a> <p class="c-g t-b t-o m-h5">Page<p> <a class="a-n" href="http://www.zytrax.com/feedback.htm"><img class="w-32" title="Page comment feature" src="http://www.zytrax.com/images/mail.png" alt="email us"></a> <a class="a-n" href="http://www.zytrax.com/run/mailpage.php"><img class="w-32" title="Send to a friend" src="http://www.zytrax.com/images/mailfriend.png" alt="Send to a friend feature"></a> <a class="a-n" href="#" onclick="window.print();return false;"><img class="w-32" title="print page" src="http://www.zytrax.com/images/printpage.png" alt="print this page"></a> <a class="a-n" title="View page full width - suppresses left and right hand menus" href="http://www.zytrax.com/tech/css/workarounds.html?pf=yes"><img class="w-32" src="http://www.zytrax.com/images/fullwidth.png" alt="Display full width page"></a> <a class="a-n" href="#" onclick="fontchange('d');return false;"><img class="w-32" title="Decrease font size" src="http://www.zytrax.com/images/smaller.png" alt="Decrease font size"></a> <a class="a-n" href="#" onclick="fontchange('i');return false;"><img class="w-32" title="Increase font size" src="http://www.zytrax.com/images/bigger.png" alt="Increase font size"></a> <p class="c-g t-b t-o m-h5">Resources</p> <p class="c-g t-b t-o m-h5">HTML Stuff</p> <p> <a title="It was the Last HTML standard - the future was XHTML - but HTML 5 rises from the ashes" href="http://www.w3.org/TR/html4/" target="_blank" class="w-db">W3C HTML 4.01</a><br> <a title="HTML is alive and well and moving toward HTML5 - the objective being an incremental standard - reconciling HTML4 and XHTML - in your dreams?" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" target="_blank" class="w-db">HTML5 (WHATWG)</a><br> <a title="HTML4 - HTML5 differences - well today's differences - and tomorrow's. Who knows." href="http://dev.w3.org/html5/html4-differences/" target="_blank" class="w-db">HTML4 vs HTML5</a><br> <a title="W3C current HTML5 Reference" href="http://dev.w3.org/html5/html-author/" target="_blank" class="w-db">HTML5 Reference</a><br> <a title="Excellent tool and great for finding page bugs as well" href="http://validator.w3.org/" target="_blank" class="w-db">W3C Page Validator</a><br> <a title="Quick list of valid DTD's - explains one of life's great mysteries" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" target="_blank" class="w-db">W3C DOCTYPE</a> </p> <p class="c-g t-b t-o m-h5">CSS Stuff</p> <p> <a title="CSS2.1 - the only approved spec" href="http://www.w3.org/TR/CSS2/" target="_blank" class="w-db">W3C CSS2.1</a><br> <a title="CSS2.2 - the lastest non-approved draft" href="https://drafts.csswg.org/css2/" target="_blank" class="w-db">W3C CSS2.2</a><br> <a title="CSS2.2 - informative (not a standard) default style sheet" href="http://www.w3.org/TR/REC-CSS2/sample.html" target="_blank" class="w-db">Default Styles</a><br> <a title="CSS3 - Selectors" href="http://www.w3.org/TR/css3-selectors/" target="_blank" class="w-db">CSS3 Selectors</a><br> <a title="CSS3 - standardized media queries" href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank" class="w-db">CSS 3 Media Queries</a><br> <a title="CSS3 - color names and values" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4" target="_blank" class="w-db">CSS 3 Colors</a> </p> <p class="c-g t-b t-o m-h5">DOM Stuff</p> <p> <a title="W3C's main DOM site with links to all their DOM documentation" href="http://www.w3c.org/DOM/" target="_blank" class="w-db">W3C DOM</a><br> <a title="W3C DOM 3 Core recommendation" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/" target="_blank" class="w-db">W3C DOM 3 Core</a><br> <a title="Dom 3 Events" href="http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/" target="_blank" class="w-db">W3C 3 Events</a> </p> <p class="c-g t-b t-o m-h5">Accessibility</p> <p> <a title="Excellent resource - research based as opposed to opnions. The guide is superb" href="http://www.usability.gov/" target="_blank" class="w-db">usability.gov</a><br> <a title="Bit heavy on motherhood." href="http://www.w3.org/WAI/guid-tech.html" target="_blank" class="w-db">W3C - WAI</a><br> <a title="Used to be the yale style guide - now renamed - good stuff" href="http://www.webstyleguide.com/index.html?/contents.html" target="_blank" class="w-db">Web Style Guide</a><br> <a title="Good background explanations such as how screen readers work and some useful tools - perhaps a bit light on research references" href="http://www.webaim.org/" target="_blank" class="w-db">WebAim.org</a><br> </p> <p class="c-g t-b t-o m-h5">Useful Stuff</p> <p> <a title="Good solid stuff well presented and paced" href="http://www.quirksmode.org/" target="_blank" class="w-db">Peter-Paul Koch</a><br> <a title="Outspoken site on use of Web Standards - many excellent articles" href="http://www.alistapart.com/" target="_blank" class="w-db">A List Apart</a><br> <a title="Some really great uses of CSS - is this CSS's future?" href="http://www.meyerweb.com/eric/css/" target="_blank" class="w-db">Eric Meyer on CSS</a><br> <a title="Real world layouts - highly pratical site for us hard working folks" href="http://glish.com/css/" target="_blank" class="w-db">glish.com</a> </p> <p class="c-g t-b t-o m-h5">Our Stuff</p> <p> <a href="http://www.zytrax.com/tech/dom/" >Our DOM Pages</a><br> <a title="Overview of navigating the DOM using Javascript" href="http://www.zytrax.com/tech/dom/navigate.html" >DOM Navigation</a><br> <a title="CSS Techniques and workarounds, including 3 column layout, pop-ups and more" href="http://www.zytrax.com/tech/css/layoutnotes.html" >Liquid Layout</a><br> <a title="CSS short forms to avoid all that 'border-with-right' stuff" href="http://www.zytrax.com/tech/css/shortcut.html" >CSS Short Cuts</a><br> <a title="CSS overview with selectors and W3C spec links" href="http://www.zytrax.com/tech/css/syntax.html" >CSS overview</a><br> <a title="CSS one page overview with links to all the W3C docs" href="http://www.zytrax.com/tech/css/syntax.html" >CSS One Page</a> </p> <p class="c-g t-b t-o m-h5">Javascript Stuff</p> <p> <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank" class="w-db">ECMA-262</a> </p> </div> <p class="c-g t-b t-o">Site</p> <a class="a-n" href="http://www.zytrax.com/about_site.htm#css"><img class="w-32" src="http://www.zytrax.com/images/css.png" alt="CSS Technology"></a> <a class="a-n" href="http://www.zytrax.com/security/spf.html"><img title="SPF Record Conformant Domain" class="w-32" src="http://www.zytrax.com/images/spf.png" alt="SPF Record Conformant Domain"></a> </div> <div class="l-f">  <table> <tr> <td class="p-f-s t-l"> Copyright © 1994 - 2025 ZyTrax, Inc.<br> All rights reserved. <a href="http://www.zytrax.com/legal.html" class="p-f-s">Legal</a> and <a href="http://www.zytrax.com/privacy.html" class="p-f-s">Privacy</a> </td> <td class="t-c"><a href="https://www.zytrax.com" target="_blank" class="p-f-s">site by zytrax</a><br> <a href="https://www.javapipe.com" target="_blank" class="p-f-s">hosted by javapipe.com</a></td> <td class="p-f-s t-r"> <a href="javascript:mailus('web-master','zytrax.com','About Web site')" class="p-f-s">web-master at zytrax</a><br> Page modified: January 20 2022. </td> </tr> </table> </div>   </body> </html>