Conformance Logo in Markup

Inspired by Kynn's excellent efforts to produce an XHTML/CSS version of the
WAI logo, I had a go myself:-
(not online yet). It uses tables for layout for a start, which is an
abomination, but it's less of an abomination than using text in images ;-)
Also, it makes sense when linearized, and it has the relavent summary and
titles.

XHTML:-
<table cellspacing="0"
   summary="WAI: WCAG 1.0 Level AA Conformance Assertion">
<tr>
<td class="left">
 <div>
   <a href="http://www.w3.org/"
      title="The World Wide Web Consortium"><span
      class="blue">W3</span><span
      class="grey">C</span></a>
 </div>
</td>
<td class="right">
 <div>
   <a href="http://www.w3.org/WAI/"
      title="Web Accessibility Initiative"
      class="black">WAI</a>-<a
      href="http://www.w3.org/WAI/WCAG1AA-Conformance"
      title="Explanation of Level AA WCAG 1.0 Conformance"
      class="red">AA</a>
 </div>
 <div>
   <a href="http://www.w3.org/TR/WCAG/"
      title="Web Content Accessibility Guidelines Version 1.0"
      class="darkgrey">WCAG 1.0</a>
  </div>
</td>
</tr>
</table>

CSS:-

table { border:2px solid #a0a0a0;margin:0em;
padding:0em;font-family:arial;font-weight:bold; }
tr { padding:0em;margin:0em; }
table a { text-decoration: none; }
td { margin: 0em; }
td.left { background-color:#ffffff; padding:0.1em;font-size:0.95em; }
td.right { background-color:#ffdb8b;text-align:right;padding:
   0.2em 0.2em 0.2em 0.7em;font-size: 0.7em; }
.blue { color: #00509f; }
.grey { color: #b0b0b8; }
.black { color: #000000; }
.red { color: #c00010; }
.darkgrey { color: #606080; }

It's quite neat, but you may want to add further classes in case you have
more tables on your page that you don't want to be affected.

Kindest Regards,
Sean B. Palmer
http://infomesh.net/sbp/
"Perhaps, but let's not get bogged down in semantics."
   - Homer J. Simpson, BABF07.

Received on Friday, 29 December 2000 10:17:34 UTC