about:jerone

W3C Valid Image

Within the webdevelopers community everyone knows the W3C and what they provide and do. One of which is providing a validation tool for websites. A few validators are available, for markup, CSS or links. Once a checked website has passed the test an image is provided with which doctype the website passed. Alsmost everyone probably seen one of these images.
The disadvantage of these are that there's one more image for on the site and that they are static. That's why I thought of an alternative, and well with CSS. I wanted to make the 'fake' image as much the same as possible with only CSS (no JavaScript or image). Another demand it had was that selecting the text gets the written information in correct order.

Do you see the differences?

W3C XHTML
1.0 √

<a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Transitional &amp; Strict">
	<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional &amp; Strict" />
</a>
<a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Transitional &amp; Strict" class="w3cbutton">
	<span class="w3c">W3C</span>
	<span class="spec">XHTML<br/>1.0</span>
	<span class="vink">&#8730;</span>
</a>

Oke, I did see the differences too, but have a look at the following too. Can you tell which one is the image and which one is 'fake'?

W3C XHTML
1.0 √

<a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Transitional &amp; Strict" class="w3cbutton">
	<span class="w3c">
		W3
		<span style="display:inline; color:black;">C</span>
		<span style="display:inline; position:relative; color:white; top:-2px; left:-11px;">C</span>
	</span>
	<span class="spec">XHTML<br>1.0</span>
	<span class="vink">
		<img src="vink.png" style="margin:10px -1px 0pt 1px;" alt=" valid">
	</span>
</a>
<a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Transitional &amp; Strict">
	<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional &amp; Strict">
</a>

Tip: try selecting the image and the 'fake' image and paste the text somewheren to see the difference between the 4 examples above (selecting text gives the same result as when no CSS is added).

And now the CSS source with one fix for IE offcourse:

<style type="text/css">
	a.w3cbutton {
		border-color:		#CCCCCC #6A5D4A #4E4E4E #CCCCCC;
		border-style:		solid;
		border-width:		1px;
		display:			block;
		font-family:		Tahoma,arial,sans-serif;
		font-size:			10px;
		font-weight:		bold;
		height:				29px;
		margin:				0;
		padding:			0;
		position:			relative;
		width:				81px;
	}
	a.w3cbutton:link, 
	a.w3cbutton:visited, 
	a.w3cbutton:hover {
		text-decoration:	none;
	}
	a.w3cbutton span {
		display:			block;
	}
	a.w3cbutton span.w3c {
		background-color:	#fff;
		border-bottom:		1px solid #B4B4B4;
		border-left:		1px solid white;
		border-right:		1px solid #A3926B;
		color:				#005A9C;
		font-family:		"Orator Std";
		font-size:			24px;
		height:				28px;
		margin:				0;
		letter-spacing:		-5px;
		line-height:		25px;
		padding:			0;
	}
	a.w3cbutton span.spec {
		background-color:	#fc6;
		border-bottom:		1px solid #B39F67;
		border-left:		1px solid #FFECC6;
		border-right:		1px solid #BBA672;
		color:				#000;
		height:				24px;
		overflow:			hidden;
		margin:				0 1px 0 0;
		line-height:		12px;
		padding:			2px;
		position:			absolute;
		right:				0;
		top:				0;
		white-space:		nowrap;
		width:				39px;
	}
	a.w3cbutton span.vink {
		color:				#900;
		font-family:		Consolas;
		font-size:			30px;
		font-weight:		bolder;
		position:			absolute;
		right:				-5px;
		top:				-1px;
	}
</style>
<!--[if IE]>
<style type="text/css">
	a.w3cbutton span.spec {
		margin-right:0px;
	}
</style>
<![endif]-->

ad