| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
| <html> |
| <style type="text/css"> |
| /* set the line height of the line of coloured boxes so we can add them without the layout changing height */ |
| .buckets { font: 0/0 Arial, sans-serif; } |
| |
| /* REMOVING THIS RULE CAUSES OTHER BROWSERS TO FAIL LIKE SAFARI */ |
| :first-child + * .buckets p { display: inline-block; vertical-align: 2em; border: 2em dotted red; padding: 1.0em 1.3em; } |
| |
| * + * > * > p { margin: 0 0.2em; border: 1px solid ! important; } |
| |
| /* sizes for the six buckets */ |
| #bucket1 { font-size: 20px; } |
| #bucket2 { font-size: 24px; } |
| #bucket3 { font-size: 28px; } |
| #bucket4 { font-size: 32px; } |
| #bucket5 { font-size: 36px; } |
| #bucket6 { font-size: 40px; } |
| |
| /* colours for them */ |
| .zP { background: black; } |
| </style> |
| |
| <script type="text/javascript"></script> <!-- THIS TAG CAUSES THE LAYOUT BADNESS --> |
| <body> |
| <div class="buckets" |
| ><p id="bucket1" class="zP"></p |
| ><p id="bucket2" class="zP"></p |
| ><p id="bucket3" class="zP"></p |
| ><p id="bucket4" class="zP"></p |
| ><p id="bucket5" class="zP"></p |
| ><p id="bucket6" class="zP"></p> |
| </div> |
| </body> |
| </html> |
