SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 96
  1. Mar 6, 2009, 03:59 #51
    frozenmyst
    frozenmyst is offline
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Paris, France
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Answer rejected
    owned !
  2. Mar 6, 2009, 08:23 #52
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    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.
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  3. Mar 6, 2009, 08:24 #53
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    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>
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  4. Mar 6, 2009, 08:24 #54
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    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>
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  5. Mar 6, 2009, 08:24 #55
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    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>
    Last edited by Paul O'B; Mar 7, 2009 at 02:28. Reason: typo
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  6. Mar 6, 2009, 08:24 #56
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    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>
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  7. Mar 6, 2009, 08:25 #57
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    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.
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  8. Mar 6, 2009, 08:40 #58
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Why was it rejected?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work
  9. Mar 6, 2009, 09:55 #59
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,036
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
  10. Mar 6, 2009, 13:00 #60
    PicnicTutorials
    PicnicTutorials is offline
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,599
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    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!
    - Picnic Website Code Tutorials
    - Facebook | Google+ | Twitter
    - My Web Design Forum
  11. Mar 6, 2009, 16:26 #61
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 17:12.
  12. Mar 6, 2009, 21:19 #62
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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
  13. Mar 6, 2009, 21:48 #63
    Centauri
    Centauri is offline
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 .....
    Centauri Web Design
  14. Mar 6, 2009, 21:51 #64
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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
  15. Mar 6, 2009, 22:51 #65
    PicnicTutorials
    PicnicTutorials is offline
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,599
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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
    - Picnic Website Code Tutorials
    - Facebook | Google+ | Twitter
    - My Web Design Forum
  16. Mar 6, 2009, 23:03 #66
    Centauri
    Centauri is offline
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ...
    Centauri Web Design
  17. Mar 6, 2009, 23:50 #67
    Rayzur
    Rayzur is offline
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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
  18. Mar 7, 2009, 02:10 #68
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
  19. Mar 7, 2009, 06:39 #69
    ro0bear
    ro0bear is offline
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    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!
  20. Mar 7, 2009, 07:49 #70
    SoulScratch
    SoulScratch is offline
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ro0bear View Post
    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&#37;+ 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".

    Quote Originally Posted by YuriKolovsky View Post
    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
    Cross browser css bugs

    Dan Schulz you will be missed
  21. Mar 7, 2009, 08:16 #71
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
  22. Mar 7, 2009, 08:33 #72
    PicnicTutorials
    PicnicTutorials is offline
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,599
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    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
    - Picnic Website Code Tutorials
    - Facebook | Google+ | Twitter
    - My Web Design Forum
  23. Mar 7, 2009, 11:26 #73
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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
  24. Mar 7, 2009, 11:42 #74
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
  25. Mar 7, 2009, 11:44 #75
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules