DevDocs/Layout: vertical-horizontal-ie.html

File vertical-horizontal-ie.html, 6.3 kB (added by Jouni Koivuviita, 11 months ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html>
4<head>
5<title>Layout Proto</title>
6<style type="text/css">
7body, html {
8        height: 100%;
9        background: white; margin:0;
10}
11</style>
12</head>
13<body>
14
15<div id="outerorderderlayout" style="height:100%; width:100%; background: #eee; overflow:hidden;">
16
17<div style="background: #daa; height: expression((this.parentNode.offsetHeight-30)/3); margin-top: 15px; margin-left: 15px; margin-right: 15px; overflow:hidden;">LoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lore
18</div>
19<div style="height: expression((this.parentNode.offsetHeight-30)/3); margin-left: 15px; margin-right: 15px; overflow:hidden;background: #ada; ">
20
21<div style="height:100%; width:100%; background: #bab; overflow:hidden;">
22
23<div style="background: #daa; height: expression((this.parentNode.offsetHeight-30-20)/3); margin-top: 15px; margin-left: 15px; margin-right: 15px; overflow:hidden;">LoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lore
24</div>
25<div style="height: expression((this.parentNode.offsetHeight-30-20)/3); margin-top: 10px; margin-left: 15px; margin-right: 15px; overflow:hidden;background: #ada; ">
26
27
28</div>
29<div style="height: expression((this.parentNode.offsetHeight-30-20)/3); margin-top: 10px; margin-left: 15px; margin-right: 15px; overflow:hidden;background: #aad; "><button>Click Me</button></div>
30
31
32</div>
33
34
35
36</div>
37<div style="height: expression((this.parentNode.offsetHeight-30)/3); margin-left: 15px; margin-right: 15px; overflow:hidden;background: #aad; ">
38
39
40<div style="height:100%; width:100%; background: #eae; overflow:hidden;">
41
42<div style="background: #daa; height: expression((this.parentNode.offsetHeight-30)); width: expression((this.parentNode.offsetWidth-30)/3); margin-top: 15px; float: left; display: inline; margin-left: 15px;overflow:hidden;">
43
44<div style="background: blue; width: 100%; height: 100%;">
45<table id="foobar-komponenttitesti" style="border: 10px outset; background: gray; width: 100%; height: 100%;"><tr><td valign="middle" align="center"><button>Q</button> <button>W</button> <button>E</button><button>R</button><button>T</button><button>Y</button>
46<br><button>A</button><button>S</button><button>D</button><button>F</button><button>G</button><br>
47<button>Z</button><button>X</button><button>C</button><button>V</button></td></tr></table> 
48</div>
49
50</div>
51<div style="height: expression((this.parentNode.offsetHeight-30)); float: left; width: expression((this.parentNode.offsetWidth-30)/3);margin-top: 15px; overflow:hidden;background: #ada; "><div style="height: 100%; width: 100%; background: #fff; overflow: auto;"><b>Paneelimockup</b><br><br>
52
53LoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lore
54</div>
55
56</div>
57<div style="height: expression((this.parentNode.offsetHeight-30)); float: left; width: expression((this.parentNode.offsetWidth-30)/3);margin-top: 15px; overflow:hidden;background: #aad;"><table id="alignment-esimerkki" cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td align="center" valign="middle">
58
59<table id="cancel-alignments"  cellpadding="0" cellspacing="0" border="0" style="background: #eee">
60<tr><td align="left" valign="top">
61<button>Click Me</button> fooo bar<br>jkldsajklad
62</td></tr></table>
63
64</td></tr></table></div>
65
66</div>
67
68
69</div>
70
71
72</div>
73<script>
74        var dom = "";
75        var body = document.getElementById("outerorderderlayout").parentNode;
76        function buildtest() {
77                alert("Trying out to build everything programmatically");
78                dom = document.getElementById("outerorderderlayout").outerHTML;
79                body.innerHTML = "rebuilding in a sec";
80                setTimeout("body.innerHTML=dom;",1000);
81        }
82        setTimeout("buildtest()",2000);
83</script>
84</body>
85</html>