accessibility-developer-tools

<html>  <head> <title>goog.style.setInlineBlock in quirks mode</title> <link rel="stylesheet" type="text/css" href="css/demo.css"> <style type="text/css"> .container { margin: 20px; border: 1px solid black; padding: 20px; background-color: #ffc; } .demo { margin: 4px; border: 1px solid blue; padding: 4px; color: red; background-color: white; vertical-align: middle; } </style> <script language="JavaScript" type="text/javascript" src="../base.js"></script> <script language="JavaScript" type="text/javascript"> goog.require('goog.style'); </script> <script language="JavaScript" type="text/javascript"> function inlineBlockify(tag, className, parentElement) { goog.array.forEach( goog.dom.getElementsByTagNameAndClass(tag, className, parentElement), function(el) { goog.style.setInlineBlock(el); }); } function inlineBlockifyAll() { inlineBlockify('span', 'demo', goog.dom.getElement('foo')); } </script> </head> <body> <h1>goog.style.setInlineBlock in quirks mode</h1> <p> This is a demonstration of the <code>goog-inline-block</code> CSS style. This page is in <strong>quirks</strong> mode. <a href="inline_block_standards.html">Click here for standards mode.</a> </p> <div class="container"> Hey, are these really <div class="demo goog-inline-block">DIV</div>s inlined in my text here? I mean, I thought <div class="demo goog-inline-block">DIV</div>s were block-level elements, and you couldn't inline them... Must be that new <div class="demo goog-inline-block">goog-inline-block</div> style... (Hint: Try resizing the window to see the <div class="demo goog-inline-block">DIV</div>s flow naturally.) Arv asked for an inline-block DIV with more interesting contents, so here goes: <div class="demo goog-inline-block"> <div style="width:320px;font-size:80%;"> <img src="../images/gears_bluedot.gif" alt="blue dot" style="float:left; margin: 0 1em 1em 0;"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus neque ut neque porta consequat. In tincidunt tellus vehicula tellus. Etiam ornare nunc vel lectus. Vivamus quis nibh. Sed nunc. <strong>On FF1.5 and FF2.0, you need to wrap the contents of your inline-block element in a DIV or P with fixed width to get line wrapping.</strong> </div> </div> </div> <div class="container"> <p> These are <span class="demo goog-inline-block">SPAN</span>s with the <span class="demo goog-inline-block">goog-inline-block</span> style applied, so you can style them like block-level elements. For example, give them <span class="demo goog-inline-block" style="margin:10px;">10px margin</span>, a <span class="demo goog-inline-block" style="border-width:10px;">10px border</span>, or <span class="demo goog-inline-block" style="padding:10px;">10px padding</span>. I used <span class="demo goog-inline-block" style="">vertical-align: middle</span> to make them all line up reasonably well. (Except on Safari 2. Go figure.) </p> <p> This is what the same content looks like <strong>without goog-inline-block</strong>: </p> <p id="foo"> These are <span class="demo">SPAN</span>s with the <span class="demo">goog-inline-block</span> style applied, so you can style them like block-level elements. For example, give them <span class="demo" style="margin:10px;">10px margin</span>, a <span class="demo" style="border-width:10px;">10px border</span>, or <span class="demo" style="padding:10px;">10px padding</span>. I used <span class="demo" style="">vertical-align: middle</span> to make them all line up reasonably well. (Except on Safari 2. Go figure.) </p> <p> <a href="#" onclick="inlineBlockifyAll();">Click here</a> to use <code>goog.style.setInlineBlock()</code> to apply the inline-block style to these SPANs. </p> </div> <p> Works on Internet Explorer 6 & 7, Firefox 1.5, 2.0 & 3.0 Beta, Safari 2 & 3, Webkit nightlies, and Opera 9. <em><strong>Note:</strong> DIVs nested in SPANs don't work on Opera.</em> </p> </body> </html>