diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/inline_block_quirks.html')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/inline_block_quirks.html | 125 |
1 files changed, 0 insertions, 125 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/inline_block_quirks.html b/contexts/data/lib/closure-library/closure/goog/demos/inline_block_quirks.html deleted file mode 100644 index 75202b8..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/inline_block_quirks.html +++ /dev/null @@ -1,125 +0,0 @@ -<html> -<!-- -Copyright 2010 The Closure Library Authors. All Rights Reserved. - -Use of this source code is governed by the Apache License, Version 2.0. -See the COPYING file for details. ---> -<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> |