CSS - Test Your CSS Skills Number 16

**frozenmyst** · Mar 6, 2009, 04:59

Originally Posted by Paul O'B

Answer rejected

owned !

**Paul O'B** · Mar 6, 2009, 09:23

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.

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>&nbsp;</span></a><!--&nbsp; 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>&nbsp;</span></a>
</div>

<div class="hoverb">
<div><h2>Automobiles</h2><p>for personal travel</p></div>
<a href="#automobiles"><span>&nbsp;</span></a>
</div>

</body>
</html>

This was my attempt.

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>

I will post all other entries in the following posts in no particlar order.

**Paul O'B** · Mar 6, 2009, 09:24

Ryan - Quiz A

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;}
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&#37;;
    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>

Raffles Quiz A

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}
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>

MediumDeviation - Quiz A

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">
*{
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>

frozenmyst - Quiz A

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>

**Paul O'B** · Mar 6, 2009, 09:24

Erik J - Quiz A

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>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&#37;</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

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">

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>

RoObear 2 (scalable) - Quiz A

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>

**Paul O'B** · Mar 6, 2009, 09:24

Samanime - Quiz A

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">
caption {
    font: bold 14px Tahoma, Geneva, sans-serif;
    text-align: center;
    width: 100&#37;;
}

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>

Centauri - Quiz A

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;
    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>

yurikolovsky - Quiz A

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>

**Paul O'B** · Mar 6, 2009, 09:24

Erik J - Quiz B

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&#37;
}
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>

Erik J 2 Quiz B

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>

**Paul O'B** · Mar 6, 2009, 09:25

Eric Watson - 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>{ 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 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>{ 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>

Eric Watson - 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>{ 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

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&#37;;
    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>

Well done to all and look out for the next quiz which will be posted some time over the weekend.

**RyanReese** · Mar 6, 2009, 09:40

Why was it rejected?

**Paul O'B** · Mar 6, 2009, 10:55

Originally Posted by RyanReese

Why was it rejected?

Because all you did was use an anchor and removed the h2 and the p element!!

This is your code:

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>

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.

In fact why didn't you just submit this as the whole effect can be done in one line lol.

Code:

 <a href="#">Planes<br> Are for Air Travel</a>

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.

**PicnicTutorials** · Mar 6, 2009, 14:00

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!

**YuriKolovsky** · Mar 6, 2009, 17:26

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.

**RyanReese** · Mar 6, 2009, 22:19

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.

**Centauri** · Mar 6, 2009, 22:48

Originally Posted by Paul O'B

The problem is that the text is not an anchor and you must use html like this.

Code:

<div>
<h2>Planes</h2>
<p>for air travel</p>
</div>

As this needs to work in IE6 then you are allowed to add only one anchor to each box but you are allowed to add extra divs and other elements if you need.

I think I can see where that may be misunderstood .....

**RyanReese** · Mar 6, 2009, 22:51

I skimmed through it, so yes. Also he didn't bold the must use this HTML.

PS: Next quiz posted sunday? Monday?

**PicnicTutorials** · Mar 6, 2009, 23:51

Originally Posted by RyanReese

I skimmed through it, so yes. Also he didn't bold the must use this HTML.

PS: Next quiz posted sunday? Monday?

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

**Centauri** · Mar 7, 2009, 00:03

...

**Rayzur** · Mar 7, 2009, 00:50

Originally Posted by EricWatson

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.

**YuriKolovsky** · Mar 7, 2009, 03:10

You see young men, Age does matter.

ill disagree a little bit, as some people acquire wisdom faster than others, and some people never acquire any wisdom at all.

**ro0bear** · Mar 7, 2009, 07:39

Originally Posted by YuriKolovsky

ill disagree a little bit, as some people acquire wisdom faster than others, and some people never acquire any wisdom at all.

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!

**SoulScratch** · Mar 7, 2009, 08:49

Originally Posted by ro0bear

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".

Originally Posted by YuriKolovsky

ill disagree a little bit, as some people acquire wisdom faster than others, and some people never acquire any wisdom at all.

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

**YuriKolovsky** · Mar 7, 2009, 09:16

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.

**PicnicTutorials** · Mar 7, 2009, 09:33

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

**RyanReese** · Mar 7, 2009, 12:26

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.

**YuriKolovsky** · Mar 7, 2009, 12:42

The Secret of Happiness

its not a secret anymore xD

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.

**RyanReese** · Mar 7, 2009, 12:44

My happiness is based off everything going my way. I can't have a more perfect day if everything goes my way

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 16

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions