Archive for CSS

Browser Compatibility Tool

// September 2nd, 2009 // No Comments » // CSS, XHTML

I came across a great browser compatibility tool to check websites for IE browsers such is IE6, IE 5.5, well, all of them in fact. What is really great about it is that it is FREE! Great to work with this along with hacking bits of CSS, thanks again Wikipedia!

Get elements by class name with javascript

// May 14th, 2009 // 4 Comments » // CSS, Javascript

Javascript does not support getting elements by class name; it only allows you to get elements by id. It is very useful having the ability to do this however, such as opening windows on a click when an anchor has an “external” class attached to it. As I don’t use frameworks such as JQuery for everything, I created this function which gets each element with a given class name and returns an array of each element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.getElementsByClassName = function(className)
{
  var children = document.getElementsByTagName('*') || document.all;
  var elements = new Array();
  for (var i = 0; i < children.length; i++)
  {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++)
    {
      if (classNames[j] == className)
      {
        elements.push(child);
        break;
      }
    }
  }
  return elements;
}

XHTML Table

// February 17th, 2009 // No Comments » // CSS, XHTML

Standards based web development and the semantic web call for markup language which matches the stucture and semantic meaning of the data. Screen readers are also an important aspect which need to be catered for. This does not mean that the tables cannot be “beautified” so I have included some CSS for the table.

Table Caption
Staff ID Staff First Name Staff Surname
Staff ID Staff First Name Staff Surname
1111 Mark Robson
2222 Paul Diston
3333 John Grisdale

Here is the table XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="0" summary="This is an example table demonstrating thead, tfoot, and tbody."><caption>Table Caption</caption>
<thead>
<tr>
<th id="id">Staff ID</th>
<th id="firstname">Staff First Name</th>
<th id="surname">Staff Surname</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Staff ID</td>
<td>Staff First Name</td>
<td>Staff Surname</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1111</td>
<td>Mark</td>
<td>Robson</td>
</tr>
<tr>
<td>2222</td>
<td>Paul</td>
<td>Diston</td>
</tr>
<tr>
<td>3333</td>
<td>John</td>
<td>Grisdale</td>
</tr>
</tbody></table>

And the style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
table
{
border-top:1px solid #999;
border-left:1px solid #999;
border-collapse:collapse;
}
caption
{
letter-spacing: 5px;
font-size:14px;
padding-bottom:5px;
color:#930;
}
th, td
{
padding:5px 10px;
border-right:1px solid #999;
border-bottom:1px solid #999;
}
th, tfoot tr td
{
background:#ccc;
font-weight:bold;
}