owned !Originally Posted by Paul O'B
Answer rejected
| SitePoint Sponsor |
owned !Answer rejected
Solution Time
It's that time again and once again thanks to everyone who took part especially the hard-core group who help make theses quizzes a success
Despite the difficulty level of both the quizzes we had a number of correct entries and surprisingly enough the shorter second quiz seemed to catch a lot of you out.
QUIZ A
Fastest entry received was again from Ryan - so well done Ryan.
It will be quite hard to pick an overall winner and although this might seem a bit unfair because he broke the rules slightly I am going to pick roObear as the winner simply for the fact that his layout scaled horizontally (and then vertically when he adjusted the JS). His layout also worked in IE7 as did a number of the other entries although it wan't required.
There were also some other good entries from Erik J, Centauri, frozenmyst and yurikolovsky and indeed the code was better in some of those entries but I liked the scalable version
The last batch of entries was also good but not quite as good as above. They were:Ryan, Raffles,MediumDeviation, Samanime.
Well done to all as you are all winners in my book
This was Tommys orignal solution:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> * {margin:0; padding:0} html {font:18px/2.0 sans-serif} body {margin:1em} table, caption, thead, tbody, tr, th {display:block} table {position:relative; width:48em; height:550px; margin-top:3em} caption {position:relative; bottom:2em} thead {position:absolute; top:100%; width:100%} thead th {float:left; width:4em; text-align:left} thead th:first-child {display:none} tbody tr {position:absolute; bottom:0; width:100%;font-size:0} .ie {left:0} .ff {left:15px} .saf {left:30px} .op {left:45px} tbody th {position:fixed; left:86em; width:12em; margin-left:1em; padding:0 0.5em; color:#fff; font-size:10px; font-weight:normal; text-align:left} .ie th {top:5em} .ff th {top:8em} .saf th {top:11em} .op th {top:14em} td {display:inline-block; vertical-align:bottom; width:3em; margin-right:5em; color:#fff; font-size:9px} .ie th, .ie td {background-color:#c00} .ff th, .ff td {background-color:#090} .saf th, .saf td {background-color:#909} .op th, .op td {background-color:#009} </style> </head> <body> <table> <caption>2008 Browser Statistics</caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
QUIZ B
I may have misled you when I said this was easy but it was only easy because I knew how to do it from the start as I had done somethng like tyhhis years ago. In fact this proved difficult for some of you as I had multiple incorrect entries.
The winners for this group are Eric J, and Eric Watson as they used similar methods followed by Centauri. They were in fact the only 3 to get to 100% correct.
I also had entries from Samanime and Raffles which replicated the desired visual effect but were not what I was looking for but they still deserve praise for solving it anyway.
The secret to solving this quiz was to put the anchor behind all the elements so that a background could be applied and then nest a span inside the anchor which was the set above all the elements so that the focus would remain above the text. Thiis was achieved with simple z-index manipulations.
The problem in IE6 was that when you hovered over any text the focus was lost and the hover effect switched off. The solution is to apply a background color to the span and then the hover is kept at the front. However this means the text is now rubbed out so intead we apply a fake background gif to the span instead of a color (i.e. an image that doesn't exist or an empty url) and this keeps the span in front of everything. (It's a technique I devised years ago to keep focus on dropdown menus in IE6.)
There are 2 other methods to keep focus and one is to used the transparent part of the dashed border (as we did in our logo competion) and the other is to use the proprietary IE opacity filter.
This was Yurikolovsky original solution that he sent to me.
This was my attempt.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>YuriKolovsky - overlay layers in IE6</title> <style type="text/css"> /*this is organised for you*/ /*Predefined Vars*/ * { margin:0; padding:0; } .hoverb { position:relative; margin-top:1.25em; margin-left:1.25em; } /*Predefined Vars*/ /*width / height*/ .hoverb div, a, a:hover span { border-style:solid; border-width:4px; } .hoverb div, a, a span { width:12em; height:100px; } a { display:block; margin-top:-108px; text-decoration:none; } h2, p { width:12em; margin:4px; } /*width / height*/ /*overlay trickery*/ a span { display:block; position:absolute; z-index:10; top:0px; left:0px; background-image:url(fake.gif); cursor:pointer; } h2, p { position:absolute; left:0; z-index:2; } /*overlay trickery*/ /*Colors*/ .hoverb div { background-color:#999; } a { border-color:#555; } a:hover { background-color:#e3e3e3; } a:hover span { border-color:#000; } /*Colors*/ /*MISC*/ h2 { margin-top:-1px; margin-left:10px; font-size:xx-large; } p { margin-left:10px; margin-top:8px; top:1.7em; font-size:large; } /*MISC*/ </style> </head> <body> <!--having h2 and p to look like its inside a link can be usefull, as clients often want hover buttons with text, and usually use ie6... notice how the links are clickable--> <div class="hoverb"> <div><h2>Planes</h2><p>for air travel</p></div><!--you could probably put all this in another div and treat that div as the h2 and p, and move h2, p inside the div--> <a href="#planes"><span> </span></a><!-- is to avoid the empty span warning in the validator--> </div> <div class="hoverb"> <div><h2>Trains</h2><p>for land travel</p></div> <a href="#trains"><span> </span></a> </div> <div class="hoverb"> <div><h2>Automobiles</h2><p>for personal travel</p></div> <a href="#automobiles"><span> </span></a> </div> </body> </html>
I will post all other entries in the following posts in no particlar order.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin:0; padding:0 } div { position:relative; width:15em; height:10em; margin:20px; } a { height:9em; width:14em; border:1em solid #ccc; background:#f2f2f2; text-decoration:none; display:block; margin-top:-6.2em; } a:hover { background:red; border-color: #000; } h2,p{margin:1em 0;} h2, p { padding:0 20px; position:relative; z-index:1; } span { z-index:99; position:absolute; width:15em; height:10em; top:0; left:0; background: url(fake.gif); } </style> </head> <body> <div> <h2>Planes</h2> <p>for air travel</p> <a href="#"><span></span></a> </div> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Ryan - Quiz A
Raffles Quiz ACode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> *{margin:0;padding:0;} table caption { font-weight:bold; font-size:1.2em; } td{vertical-align:bottom!important;} tbody tr.ff th { background:green; color:#fff; position:absolute; top:50px; left:85%; text-align:left; width:150px; } tbody tr.ie th { background:red; position:absolute; color:#fff; text-align:left; width:150px; top:70px; left:85%; } tbody tr.op th { background:blue; color:#fff; top:90px; left:85%; width:150px; text-align:left; position:absolute; } tbody tr.saf th { background:purple; color:#fff; position:absolute; top:110px; width:150px; text-align:left; left:85%; } tbody tr.ie td { background:red; text-align:left; color:#fff; display:inline-block; margin-left:35px; } tbody tr.ff td { background:green; position:relative; left:10px; top:-446px; margin-left:35px; color:#fff; text-align:left; display:inline-block; } tbody tr.op td { background:blue; color:#fff; position:relative; left:27px; margin-left:42px; top:-502px; text-align:left; display:inline-block; } tbody tr.saf td { background:purple; position:relative; left:15px; top:-476px; color:#fff; margin-left:42px; text-align:left; display:inline-block; } thead { position:absolute; z-index:99; top:140%; } thead tr th { min-width:75px; } thead tr { position:absolute; left:-50px; } </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
MediumDeviation - Quiz ACode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> * {margin:0; padding:0} table { font-family:"Trebuchet MS", "Arial Narrow", "Lucida Grande", Helvetica, Verdana, sans-serif; width:98%; border-spacing:0; margin-left:0.6em; } caption { text-align:center; font-weight:bold; } thead, tbody { position:absolute; bottom:2em; width:100%; } thead { bottom:0.5em; } thead th:first-child {display:none} tr { vertical-align:bottom; position:absolute; bottom:0; width:100%; } th { width:4.92em; } td, tbody th { display:inline-block; vertical-align:bottom; width:2.9em; position:relative; margin-left:4.8em; font-size:0.6em; color:#FFF; } th + td { margin-left:0; } .ie * { background:#C00; } .ff * { background:#090; left:1.55em; } .saf * { background:#909; left:3.1em } .op * { background:#009; left:4.65em; } tbody th { position:fixed; padding:0.2em; text-align:left; right:0; top:1.5em; left:auto !important; width:10em; } .ff th { top:3.9em; } .saf th { top:6.3em; } .op th { top:8.7em; }</style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
frozenmyst - Quiz ACode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> *{ font-size:1em; margin:0; padding:0; } table{ height:800px; font-family:Georgia,serif; } .ie td{ background-color:maroon; } .ie{ margin-left:5px; } .ff td{ background-color:green; } .ff{ margin-left:20px; } .saf td{ background-color:purple; } .saf{ margin-left:35px; } .op td{ background-color:blue; } .op{ margin-left:50px; } caption{ width:950px; text-align:center; font-size:1.4em; letter-spacing:1px; } thead tr{ display:block; position:absolute; bottom:60px; left:20px; } thead th{ margin-left:45px; display:inline; } thead th:first-child{ display:none; } tbody tr{ display:block; position:absolute; bottom:100px; float:right; border-bottom:1px black solid; } tbody th{ display:block; float:right; top:0; vertical-align:top; } td{ width:25px; margin-left:50px; font-size:0.6em; color:white; display:inline-block; position:relative; vertical-align:bottom; } </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #000; } table { display: block; position: relative; height: 648px; width: 1075px; background: #fff; } caption { display: block; font: 18px/70px Arial, sans-serif; margin-right: 130px; } thead { position: absolute; bottom: 7px; left: 7px; text-align: left; font: bold 18px/38px Arial, sans-serif; } thead th { width: 72px; float: left; } thead th:first-child { display: none; } tbody tr { display: block; position: absolute; bottom: 45px; left: 7px; font: 0px/0px arial, sans-serif; /* FF inline-block whitespace bug */ } tbody th { position: absolute; right: -158px; width: 125px; height: 20px; font: 9px/20px Arial, sans-serif; color: #fff; text-align: left; padding-left: 5px; } .ie th { background: #cc0000; top: -6px; } .ff th { background: #009900; top: -80px; } .saf th { background: #990099; top: -466px; } .op th { background: #000099; top: -440px; } td { display: inline-block; vertical-align: bottom; width: 27px; color: #fff; font: 9px/15px Arial, sans-serif; } .ie td { background: #cc0000; margin: 0 45px 0 0; } .ff td { background: #009900; margin: 0 30px 0 15px; } .saf td { background: #990099; margin: 0 15px 0 30px; } .op td { background: #000099; margin: 0 0 0 45px; } tbody .ie tr { height: 548px; } tbody .ff tr { height: 444px; } tbody .saf tr { height: 50px; } tbody .op tr { height: 100px; } </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Erik J - Quiz A
RoObearCode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>2008 Browser Statistics</title> <style type="text/css"> body{ position:relative; margin:0 auto; width:1195px; height:700px; } table{ width:1195px; font-size:12px; } caption{ font-size:24px; } thead th{ position:absolute; top:25px; right:0; width:110px; height:20px; text-align:left; } thead th+th{ top:auto; bottom:0; right:auto; width:100px; text-align:center; } thead th+th{ left:0} thead th+th+th{ left:100px} thead th+th+th+th{ left:200px} thead th+th+th+th+th{ left:300px} thead th+th+th+th+th+th{ left:400px} thead th+th+th+th+th+th+th{ left:500px} thead th+th+th+th+th+th+th+th{ left:600px} thead th+th+th+th+th+th+th+th+th{ left:700px} thead th+th+th+th+th+th+th+th+th+th{ left:800px} thead th+th+th+th+th+th+th+th+th+th+th{ left:900px} thead th+th+th+th+th+th+th+th+th+th+th+th{ left:1000px} thead th+th+th+th+th+th+th+th+th+th+th+th+th{ left:1100px} tbody th{ position:absolute; right:0; padding-left:10px; width:110px; height:20px; text-align:left; } .ie th{ top:50px; background:blue; color:white} .ff th{ top:75px; background:red; color:white} .saf th{ top:100px; background:green; color:white} .op th{ top:125px; background:yellow} tbody td{ position:absolute; bottom:25px; left:0; width:35px; vertical-align:top; } .ie td{ background:blue; color:white} .ie td+td{ left:100px} .ie td+td+td{ left:200px} .ie td+td+td+td{ left:300px} .ie td+td+td+td+td{ left:400px} .ie td+td+td+td+td+td{ left:500px} .ie td+td+td+td+td+td+td{ left:600px} .ie td+td+td+td+td+td+td+td{ left:700px} .ie td+td+td+td+td+td+td+td+td{ left:800px} .ie td+td+td+td+td+td+td+td+td+td{ left:900px} .ie td+td+td+td+td+td+td+td+td+td+td{ left:1000px} .ie td+td+td+td+td+td+td+td+td+td+td+td{ left:1100px} .ff td{ left:20px; background:red; color:white} .ff td+td{ left:120px} .ff td+td+td{ left:220px} .ff td+td+td+td{ left:320px} .ff td+td+td+td+td{ left:420px} .ff td+td+td+td+td+td{ left:520px} .ff td+td+td+td+td+td+td{ left:620px} .ff td+td+td+td+td+td+td+td{ left:720px} .ff td+td+td+td+td+td+td+td+td{ left:820px} .ff td+td+td+td+td+td+td+td+td+td{ left:920px} .ff td+td+td+td+td+td+td+td+td+td+td{ left:1020px} .ff td+td+td+td+td+td+td+td+td+td+td+td{ left:1120px} .saf td{ left:40px; background:green; color:white} .saf td+td{ left:140px} .saf td+td+td{ left:240px} .saf td+td+td+td{ left:340px} .saf td+td+td+td+td{ left:440px} .saf td+td+td+td+td+td{ left:540px} .saf td+td+td+td+td+td+td{ left:640px} .saf td+td+td+td+td+td+td+td{ left:740px} .saf td+td+td+td+td+td+td+td+td{ left:840px} .saf td+td+td+td+td+td+td+td+td+td{ left:940px} .saf td+td+td+td+td+td+td+td+td+td+td{ left:1040px} .saf td+td+td+td+td+td+td+td+td+td+td+td{ left:1140px} .op td{ left:60px; background:yellow} .op td+td{ left:160px} .op td+td+td{ left:260px} .op td+td+td+td{ left:360px} .op td+td+td+td+td{ left:460px} .op td+td+td+td+td+td{ left:560px} .op td+td+td+td+td+td+td{ left:660px} .op td+td+td+td+td+td+td+td{ left:760px} .op td+td+td+td+td+td+td+td+td{ left:860px} .op td+td+td+td+td+td+td+td+td+td{ left:960px} .op td+td+td+td+td+td+td+td+td+td+td{ left:1060px} .op td+td+td+td+td+td+td+td+td+td+td+td{ left:1160px} </style></head><body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body></html>
RoObear 2 (scalable) - Quiz ACode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> caption {font-weight: bold; font-size: 150%; position: absolute; left: 30%;} td {position: absolute; bottom: 2.5em; color: white; padding-bottom: 0.3em; font-size: 55%;} .ie td {background-color: red; margin-left: 1%;} .ff td {background-color: green; margin-left: 2%;} .saf td {background-color: purple; margin-left: 3%;} .op td {background-color: blue; margin-left: 4%;} tbody th {position: absolute; left: 72%; width: 10em; text-align: left;} .ie th {background-color: red; margin-top: 2em;} .ff th {background-color: green; margin-top: 4em;} .saf th {background-color: purple; margin-top: 6em;} .op th {background-color: blue; margin-top: 8em;} thead th {position: absolute; bottom: 0; font-size: 100%; margin-left: 1%} thead>tr>th:first-child {height: 0; width: 0; line-height: 0; overflow: hidden;} /* bar spacing */ tr>td, thead>tr>th+th {left: 0;} tr>td+td, thead>tr>th+th+th {left: 6%;} tr>td+td+td, thead>tr>th+th+th+th {left: 12%;} tr>td+td+td+td, thead>tr>th+th+th+th+th {left: 18%;} tr>td+td+td+td+td, thead>tr>th+th+th+th+th+th {left: 24%;} tr>td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th {left: 30%;} tr>td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th {left: 36%;} tr>td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th {left: 42%;} tr>td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th {left: 48%;} tr>td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th {left: 54%;} tr>td+td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th+th {left: 60%;} tr>td+td+td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th+th+th {left: 66%;} tr>td+td+td+td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th+th+th+th {left: 72%;} </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> html, body, table {width: 95%; height: 95%; overflow: hidden;} caption {font-weight: bold; font-size: 150%; position: absolute; left: 30%; top: 3%;} table {padding-top: 2em;} td {position: absolute; bottom: 2.5em; color: white; padding-bottom: 0.3em; font-size: 55%;} .ie td, .ie th {background-color: red;} .ff td, .ff th {background-color: green;} .saf td, .saf th {background-color: purple;} .op td, .op th {background-color: blue;} tbody th {position: absolute; left: 74%; width: 10em; text-align: left; color: white; font-size: 80%;} .ie th {position: absolute; top: 6em;} .ff th {position: absolute; top: 8em;} .saf th {position: absolute; top: 10em;} .op th {position: absolute; top: 12em;} thead th {position: absolute; bottom: 0; font-size: 100%;} thead tr th {height: 0; width: 0; line-height: 0; padding: 0; margin: 0; overflow: hidden;} thead tr th+th {height: auto; width: auto; line-height: 100%; margin-bottom: 0.5%; overflow: visible;} /* bar spacing (bloated to accomodate IE7) */ .ie>td, thead>tr>th+th {left: 1%;} .ie>td+td, thead>tr>th+th+th {left: 7%;} .ie>td+td+td, thead>tr>th+th+th+th {left: 13%;} .ie>td+td+td+td, thead>tr>th+th+th+th+th {left: 19%;} .ie>td+td+td+td+td, thead>tr>th+th+th+th+th+th {left: 25%;} .ie>td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th {left: 31%;} .ie>td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th {left: 37%;} .ie>td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th {left: 43%;} .ie>td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th {left: 49%;} .ie>td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th {left: 55%;} .ie>td+td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th+th {left: 61%;} .ie>td+td+td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th+th+th {left: 67%;} .ie>td+td+td+td+td+td+td+td+td+td+td+td+td, thead>tr>th+th+th+th+th+th+th+th+th+th+th+th+th+th {left: 73%;} .ff>td {left: 2%;} .ff>td+td {left: 8%;} .ff>td+td+td {left: 14%;} .ff>td+td+td+td {left: 20%;} .ff>td+td+td+td+td {left: 26%;} .ff>td+td+td+td+td+td {left: 32%;} .ff>td+td+td+td+td+td+td {left: 38%;} .ff>td+td+td+td+td+td+td+td {left: 44%;} .ff>td+td+td+td+td+td+td+td+td {left: 50%;} .ff>td+td+td+td+td+td+td+td+td+td {left: 56%;} .ff>td+td+td+td+td+td+td+td+td+td+td {left: 62%;} .ff>td+td+td+td+td+td+td+td+td+td+td+td {left: 68%;} .ff>td+td+td+td+td+td+td+td+td+td+td+td+td {left: 74%;} .saf>td {left: 3%;} .saf>td+td {left: 9%;} .saf>td+td+td {left: 15%;} .saf>td+td+td+td {left: 21%;} .saf>td+td+td+td+td {left: 27%;} .saf>td+td+td+td+td+td {left: 33%;} .saf>td+td+td+td+td+td+td {left: 39%;} .saf>td+td+td+td+td+td+td+td {left: 45%;} .saf>td+td+td+td+td+td+td+td+td {left: 51%;} .saf>td+td+td+td+td+td+td+td+td+td {left: 57%;} .saf>td+td+td+td+td+td+td+td+td+td+td {left: 63%;} .saf>td+td+td+td+td+td+td+td+td+td+td+td {left: 69%;} .saf>td+td+td+td+td+td+td+td+td+td+td+td+td {left: 75%;} .op>td {left: 4%;} .op>td+td {left: 10%;} .op>td+td+td {left: 16%;} .op>td+td+td+td {left: 22%;} .op>td+td+td+td+td {left: 28%;} .op>td+td+td+td+td+td {left: 34%;} .op>td+td+td+td+td+td+td{left: 40%;} .op>td+td+td+td+td+td+td+td{left: 46%;} .op>td+td+td+td+td+td+td+td+td{left: 52%;} .op>td+td+td+td+td+td+td+td+td+td{left: 58%;} .op>td+td+td+td+td+td+td+td+td+td+td{left: 64%;} .op>td+td+td+td+td+td+td+td+td+td+td+td {left: 70%;} .op>td+td+td+td+td+td+td+td+td+td+td+td+td {left: 76%;} </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> var td = document.getElementsByTagName("TD"); var highest = true; var pct = new Array(); for (var i = 0, n = td.length; i < n; ++i) { pct[i] = parseFloat(td[i].firstChild.data); if (pct[i] > highest) { highest = pct[i]; } } highest = 75/highest; for (i = 0, n = td.length; i < n; ++i) { pct[i] = pct[i] * highest; td[i].style.height = pct[i] + "%"; } </script> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Samanime - Quiz A
Centauri - Quiz ACode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> caption { font: bold 14px Tahoma, Geneva, sans-serif; text-align: center; width: 100%; } td { font-size: 12px; color: #FFF; vertical-align: top; } tbody tr { display: inline-table; position: absolute; bottom: 20px; } tbody th { position: absolute; right: 0px; width: 200px; text-align: left; font-size: 12px; color: #FFF; padding: 3px; } tbody td { display: inline-block; width: 30px; margin: 0 30px 0; vertical-align:bottom; } thead th:first-child { display: none; } thead th { padding: 0 32px; } thead tr { display: inline-table; position: absolute; margin: 0 0 0 30px; bottom: 0; } .ff { margin: 0 0 0 20px; } .saf { margin: 0 0 0 40px; } .op { margin: 0 0 0 60px; } .ie td, .ie th { background: #F00; } .ff td, .ff th { background: #090; } .saf td, .saf th { background: #C0C; } .op td, .op th { background: #009; } .ie th { top: 10px;} .ff th { top: 40px;} .saf th { top: 70px;} .op th { top: 100px;} </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
yurikolovsky - Quiz ACode:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } table { position: relative; display: block; width: 56.5em; font-family: Arial, Helvetica, sans-serif; margin: 20px; } caption { font-size: 110%; font-weight: bold; display: block; padding-bottom: 575px; padding-left: 5em; } thead { display: block; } .ie td, .ie th { background-color: #CC0000; color: #FFFFFF; } .ff td, .ff th { background-color: #009900; color: #FFFFFF; } .saf td, .saf th { background-color: #990099; color: #FFFFFF; } .op td, .op th { background-color: #000099; color: #FFFFFF; } tbody td { font-size: 56%; width: 3em; text-align: center; overflow: hidden; position: absolute; display: block; bottom: 0px; left: 0px; vertical-align: top; line-height: 1.8em; } tbody td + td { left: 8.3em; } tbody td + td + td { left: 16.6em; } tbody td + td + td + td { left: 24.9em; } tbody td + td + td + td + td { left: 33.2em; } tbody td + td + td + td + td + td { left: 41.5em; } tbody td + td + td + td + td + td + td { left: 49.8em; } tbody td + td + td + td + td + td + td + td { left: 58.1em; } tbody td + td + td + td + td + td + td + td + td { left: 66.4em; } tbody td + td + td + td + td + td + td + td + td + td { left: 74.7em; } tbody td + td + td + td + td + td + td + td + td + td + td { left: 83em; } tbody td + td + td + td + td + td + td + td + td + td + td + td { left: 91.3em; } tbody tr{ height: 590px; position: absolute; top: 0px; left: 0px; width: 64em; display: block; border-right: 1px solid white; } tbody .ff { left: 1em; width: 63em; } tbody .saf { left: 2em; width: 62em; } tbody .op { left: 3em; width: 61em; } tbody th { font-size: 70%; width: 11em; height: 1.8em; line-height: 1.8em; text-align: left; padding-left: 5px; font-weight: normal; display: block; position: absolute; right: 0px; top: 4em; overflow: hidden; border-bottom: 0.7em solid white; } tbody .ff th { top: 6.5em; } tbody .saf th { top: 9em; } tbody .op th { top: 11.5em; } thead th:first-child { display: none; } thead th { display: block; float: left; width: 4.66em; text-align: left; } </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>2008 Browser Statistics</title> <style type="text/css"> * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; } table { position:relative; display:block; height:650px; width:900px; margin:10px; } tr { vertical-align:top; bottom:0; } td { vertical-align: bottom; display:inline-block; } td { color:#fff; font-size:10px; } th { color:#fff; font-size:12px; font-weight:normal; } thead { position:absolute; display:block; bottom:0; } tr th { right:0; position:absolute; top:0; } tbody tr { position:absolute; } tbody th { position:absolute; top:0; right:0; width:150px; text-align:left; text-indent:10px; } tbody td { width:30px; position:relative; margin:0 40px 0 0; } .ie td, .ie th { background-color:red; } .ff td, .ff th { background-color:green; } .saf td, .saf th { background-color:purple; } .op td, .op th { background-color:navy; } .ie td { left:0; } .ff td { left:15px; } .saf td { left:30px; } .op td { left:45px; } .ie th { right:-150px; top:-20px; } .ff th { right:-150px; top:-100px; } .saf th { right:-150px; top:-492px; } .op th { right:-150px; top:-472px; } table thead { position:absolute; bottom:-30px; } table thead th { position:relative; color:#000; width:72px; text-align:left; font-size:18px; font-weight:bold; height:25px; } table thead th:first-child { display:none; } caption { font-weight:bold; width:100%; margin-top:30px; text-align:center; } </style> </head> <body> <table> <caption> 2008 Browser Statistics </caption> <thead> <tr> <th>Browser</th> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr class="ie"> <th>Internet Explorer</th> <td>54.7%</td> <td>54.7%</td> <td>53.9%</td> <td>54.8%</td> <td>54.5%</td> <td>54.0%</td> <td>51.7%</td> <td>50.5%</td> <td>48.6%</td> <td>47.1%</td> <td>46.6%</td> <td>45.7%</td> </tr> <tr class="ff"> <th>Firefox</th> <td>36.4%</td> <td>36.5%</td> <td>37.0%</td> <td>39.1%</td> <td>39.8%</td> <td>41.0%</td> <td>42.6%</td> <td>43.7%</td> <td>42.6%</td> <td>44.0%</td> <td>44.2%</td> <td>44.4%</td> </tr> <tr class="saf"> <th>Safari</th> <td>1.9%</td> <td>2.0%</td> <td>2.1%</td> <td>2.2%</td> <td>2.4%</td> <td>2.6%</td> <td>2.5%</td> <td>2.6%</td> <td>2.7%</td> <td>2.8%</td> <td>2.7%</td> <td>2.7%</td> </tr> <tr class="op"> <th>Opera</th> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.4%</td> <td>1.5%</td> <td>1.7%</td> <td>1.9%</td> <td>2.1%</td> <td>2.0%</td> <td>2.2%</td> <td>2.3%</td> <td>2.4%</td> </tr> </tbody> </table> <script type="text/javascript"> (function () { var td = document.getElementsByTagName("TD"); for (var i = 0, n = td.length; i < n; ++i) { var pct = parseFloat(td[i].firstChild.data) * 10.0; td[i].style.height = pct + "px"; } })(); </script> </body> </html>
Last edited by Paul O'B; Mar 7, 2009 at 03:28. Reason: typo
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Erik J - Quiz B
Erik J 2 Quiz BCode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz 16b / erik.j</title> <style type="text/css"> html, body { height:100% } h2, p { margin:0 } div { position:relative; padding: 15px 0 0 15px; width:200px; height:100px; } a { display:block; margin: -15px 0 -65px -15px; padding: 10px 0 0 10px; border:5px solid #333; width:200px; height:100px; background:#999; text-decoration:none; color:#000; } a:hover { border-color:#666; background:#ccc; } span { position:absolute; top:0; left:0; border-left:220px dotted transparent; height:120px; cursor:pointer; } </style> </head> <body> <div> <h2><a href="#">Planes<span></span></a></h2> <p>for air travel</p> </div> </body> </html>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz 16b / erik.j</title> <style type="text/css"> html, body { height:100% } div { position:relative; margin:5px; width:20%; height:15%; } h2 { float:left; margin:0; width:100%; height:100%; margin: 0 -100% 0 0; } p { float:left; margin:0; padding: 45px 0 0 15px; } a { float:left; width:100%; height:100%; background:#999; text-decoration:none; color:#000; } a:hover { border-color:#666; background:#ccc; } span { position:absolute; top:-5px; left:-5px; border:5px solid #333; width:100%; height:100%; background:url(' '); text-indent:15px; line-height:46px; cursor:pointer; } a:hover span { border-color:#666; } </style> </head> <body> <div> <h2><a href="#"><span>Planes</span></a></h2> <p>for air travel</p> </div> </body> </html>
Raffles - quiz B
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Travel</title> <style type="text/css"> div { margin-bottom:1em; background:#E3E3E3; height:120px; width:200px; } a:link, a:visited { color:#000; border:3px solid #525252; background:#999; display:block; height:120px; width:200px; text-decoration:none; } div a:hover { background:0; border-color:#000; } h2, p {display:none} span { display:block; font-size:2em; margin:8px 12px; } span.cap { font-size:0.8em; } </style> </head> <body> <div> <h2>Planes</h2> <p>for air travel</p> <a href="#"><span>Planes</span><span class="cap">for air travel</span></a> </div> <div> <h2>Trains</h2> <p>for land travel</p> <a href="#"><span>Trains</span><span class="cap">for land travel</span></a> </div> <div> <h2>Automobiles</h2> <p>for personal travel</p> <a href="#"><span>Automobiles</span><span class="cap">for personal travel</span></a> </div> </body> </html>
Samanime - Quiz B
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE6 Rollover</title> <style type="text/css"> html, body, div, a, p, span, h2 { margin: 0; padding: 0; } div { height: 500px; width: 500px; background: #CCC; border: 2px solid #333; } a { display: block; position: absolute; top: 50px; left: 50px; padding: 50px; width: 400px; height: 400px; margin: -50px 0 0 -50px; z-index: 1; color: #000; text-decoration: none; } a:hover { background: #EEE; border: 2px solid #999; padding: 48px 52px 52px 48px; } h2, span { font-size: 16px; font-weight: bold; line-height: 20px; position: absolute; top: 5px; left: 5px; } span { display: none; } a:hover span { top: 3px; left: 3px; display: block; } </style> </head> <body> <div> <h2>Planes</h2> <p><a href="#"><span>Planes</span>for air travel</a></p> </div> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Eric Watson - Quiz B
Eric Watson - Quiz BCode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; }</title> <style type="text/css"> <!-- * { margin:0; padding:0; } div { height:250px; width:350px; margin:50px auto; position:relative; } a { display:block; height:250px; background:#999; border:10px solid #666; } a:focus, a:hover, a:active { background:#ccc; border:10px solid #000; } h2, p { position:absolute; left:20px;top:15px; } p { margin:30px 0 0; font-weight:bold; } span { position:absolute; top:10px;left:10px; height:250px; width:330px; cursor:pointer; background:url(a.jpg); /* or opacity zero */ } --> </style> </head> <body> <div> <h2>Planes</h2> <p>for air travel</p> <a href="#"><span></span></a> </div> </body> </html>
Eric Watson - Quiz BCode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; }</title> <style type="text/css"> <!-- * { margin:0; padding:0; } div { height:250px; width:350px; margin:50px auto; position:relative; } a { display:block; height:250px; background:#999; border:10px solid #666; } a:focus, a:hover, a:active { background:#ccc; border:10px solid #000; } h2, p { position:absolute; left:20px;top:15px; } p { margin:30px 0 0; font-weight:bold; } span { position:absolute; top:10px;left:10px; height:150px; width:330px; cursor:pointer; border-top:100px dashed transparent; } --> </style> </head> <body> <div> <h2>Planes</h2> <p>for air travel</p> <a href="#"><span></span></a> </div> </body> </html>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; }</title> <style type="text/css"> <!-- * { margin:0; padding:0; } div { height:250px; width:350px; margin:50px auto; position:relative; } a { display:block; height:250px; background:#999; border:10px solid #666; } a:focus, a:hover, a:active { background:#ccc; border:10px solid #000; } h2, p { position:absolute; left:20px;top:15px; } p { margin:30px 0 0; font-weight:bold; } span { position:absolute; top:10px;left:10px; height:250px; width:330px; cursor:pointer; background:#ccc; opacity:0; -ms-filter:"alpha(opacity=0)"; filter:alpha(opacity=0); } --> </style> </head> <body> <div> <h2>Planes</h2> <p>for air travel</p> <a href="#"><span></span></a> </div> </body> </html>
Centauri - Quiz B
Well done to all and look out for the next quiz which will be posted some time over the weekend.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; } div { position: relative; width: 11em; height: 6em; margin: 20px; } div a { width: 11em; height: 6em; background-color: #999999; border: 3px solid #525252; display: block; } div a:hover { background-color: #E3E3E3; border-color: #000000; } div h2 { font-size: 180%; margin-top: -3.4em; padding-left: 10px; } div p { padding-left: 10px; font-weight: bold; } div a span { position: absolute; left: 0px; top: 0px; width: 11em; height: 6em; background-image: url(bogus.gif); cursor: pointer; } </style> </head> <body> <div> <a href="#"><span></span></a> <h2>Planes</h2> <p>for air travel</p> </div> <div> <a href="#"><span></span></a> <h2>Trains</h2> <p>for land travel</p> </div> <div> <a href="#"><span></span></a> <h2>Automobiles</h2> <p>for personal travel</p> </div> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Why was it rejected?
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
Because all you did was use an anchor and removed the h2 and the p element!!
This is your code:
There would be no quiz if that was the answer because that's the way it works without doing anything else except setting the anchor to display:block.Code:<div id="wrapper"> <div class="top"></div> <div class="left"></div> <a href="#">Planes Are for Air Travel</a> <div class="right"></div> <div class="bottom"></div> </div>
In fact why didn't you just submit this as the whole effect can be done in one line lol.
The idea was to use the h2 and the p elements as structured content but then to turn the whole thing into a link. Not to remove all the html I gave you and just use an anchor instead.Code:<a href="#">Planes<br> Are for Air Travel</a>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Thanks Paul for consistently taking the time to setup, explain, and post the the quizes, and then explaining the solution, and then posting all of the participents code. I could imagine that is a very time consuming process. So again, thank you! Not to mention, this collection of quizes is quickly becoming an invaluable resource!
i prefer the solution to quiz b where the invisible border is used, they work just like images, and
it loads faster and has no 404 missing image.
(why didn't i think of that!)
and i agree with EricWatson
these quizzes are turning into a css reference.
with all the tricks here, life does become a lot easier when you work with css.
edit:
and thanks paul for all the work you put in.
edit2:
the solution required 2 tricks, z-index manipulation, and real transparent backgrounds.
for those who still don't understand, you need
to give the span inside the link a position and a z index
and to not give a position to the link itself, this way the parent z-index gets ignored and the span can be above anything.
so when you hover over the span, you are actually hovering over the link (because the span is inside the link), making the :hover css state activate and changing the background and border of the link, even tho it is under the text.
the span must then maintain the hover state, but because it is transparent ie ignores it, so
the span itself is transparent with a fake image or transparent border to maintain the links focus, in every browser.
@Ryan
and you said B was too easy! xD
@ErikJ
I love it how you put the link within the H2,
its not exactly as planned, but has its own positives.
@EricWatson
i love your invisible border
and its amazing that you got 3 different solutions for 1 problem.
@Centauri
you think like me, but a lot cleaner.
awesome job you 3.
@everyone who tried
thx for trying
and i hope everyone had fun.
Last edited by YuriKolovsky; Mar 6, 2009 at 18:12.
I thought it was but I didn't really follow the rules. I didn't realize you HAD to use something like the HTML he used. Thought that was just example code.
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
I think I can see where that may be misunderstood .....
I skimmed through it, so yes. Also he didn't bold the must use this HTML.
PS: Next quiz posted sunday? Monday?
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
Whoever wants to be a judge of human nature should study people's excuses.
~Hebbel
The absent are never without fault, nor the present without excuse.
~Benjamin Franklin
It is easier to find an excuse than to find a reason.
~Doug Brown
Feeble men excuse their faults; able men learn from them.
~Eric Watson
Good advice Eric!
Wisdom is acquired from experience and experience is cultivated with time.
The time you invest is the measure of your patience.
When you gain patience then quality triumphs over quantity.
When I was a young man I thought I knew it all, but I was lacking wisdom and patience.
Wisdom cannot be learned, it must be earned.
~Ray H.
You see young men, Age does matter.
Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
ill disagree a little bit, as some people acquire wisdom faster than others, and some people never acquire any wisdom at all.You see young men, Age does matter.
I do some voluntary work with the woodland trust. Ive only been doing it for a few months and it really amazes me that I know more about it than several people who have been doing it for 20 years! They just dont think about what they are doing and why, so wisdom doesnt always come with age or experience. Of course, as you would expect, some other people there who have been doing it for 20 years, know a lot more than me about it!
Pretty much in all cases, 95%+ I'd say this applies which makes the statement still true. Though I don't even think *anyone* has been doing web development for 20 years as it was 19 years ago that TBL even proposed a "web of nodes".
I agree with Ray's statement for the most part as a perfect demonstration was given a few posts ago, but there are always exceptions
if wisdom came with time, everyone would be wise.
edit:
i personally think that wisdom is a personality trait.
dictionary: Wisdom
# accumulated knowledge or erudition or enlightenment
# the trait of utilizing knowledge and experience with common sense and insight
# the quality of being prudent and sensible
# Knowledge with information so thoroughly assimilated as to have produced sagacity, judgment, and insight.
most people fail to accumulate knowledge
most people never use common sense (this is not a bad thing)
and very few people are prudent and sensible.
even small amounts of knowledge can produce sagacity, judgment and insight.
this is why i disagree with Ray H's statement.
Off Topic: While we're on the subject of "quotes", I've got another good one for you!
The Secret of Happiness
The secret of happiness is feeling content with the grass that you are currently on (you know the saying - "the grass is always greener"). That's not to say that you shouldn't push yourself to higher plateaus, or seek out greater things in life. It just means that while your reaching for these higher places, to be fulfilled, and at peace with where you currently are in life. However, not complacent, otherwise what's to push you to that next life long goal. I believe it's all about striking a nice balance between the two. I personally have not, nor will I most likely ever truly accomplished this myself. However, be that as it may, that's the secret.
~Eric Watson
Soo....when's that new quiz.
Age does not matter. I'm sure at least one time you have misread something. Right?
If you say no your lying. Either way I win.
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
its not a secret anymore xDThe Secret of Happiness
its all very simple really.
don't worry, be happy.
my advice on achieving happiness would be to not do it.
you don't need to achieve happiness at all, you need to maintain it.
my advice would be to
look at everything from a funny perspective, its easy, relaxing and fun.
@RyanReese
let paul & everyone else rest a little bit, you better spend time on making up some fun quizzes on your own, i know you might have some, then make more.
My happiness is based off everything going my way. I can't have a more perfect day if everything goes my way
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
Posting Permissions
Dan Schulz you will be missed
Bookmarks