<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MaggsWeb:7 &#187; CSS</title>
	<atom:link href="http://www.maggsweb.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.maggsweb.com</link>
	<description>www.maggsweb.com</description>
	<lastBuildDate>Fri, 03 Feb 2012 22:50:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>CSS Rounded borders</title>
		<link>http://www.maggsweb.com/css/css-rounded-borders/</link>
		<comments>http://www.maggsweb.com/css/css-rounded-borders/#comments</comments>
		<pubDate>Sat, 27 Aug 2011 22:02:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=1318</guid>
		<description><![CDATA[?View Code CSS&#160; -moz-border-radius: 8px; /*Mozilla*/ -webkit-border-radius:8px;/*Google chrome*/ -khtml-border-radius:8px; /* Linux browsers */ border-radius:8px;/*CSS3 and IE8 */]]></description>
			<content:encoded><![CDATA[
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1318code2'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p13182"><td class="code" id="p1318code2"><pre class="css" style="font-family:monospace;">&nbsp;
-moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/*Mozilla*/</span>
-webkit-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">8px</span><span style="color: #00AA00;">;</span><span style="color: #808080; font-style: italic;">/*Google chrome*/</span>
-khtml-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Linux browsers */</span>
border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">8px</span><span style="color: #00AA00;">;</span><span style="color: #808080; font-style: italic;">/*CSS3 and IE8 */</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css-rounded-borders/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Reset</title>
		<link>http://www.maggsweb.com/css/css-reset/</link>
		<comments>http://www.maggsweb.com/css/css-reset/#comments</comments>
		<pubDate>Thu, 28 Apr 2011 12:59:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=1218</guid>
		<description><![CDATA[?View Code CSS/* * CSS Reset based on code from * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ * */ &#160; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, [...]]]></description>
			<content:encoded><![CDATA[
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1218code4'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p12184"><td class="code" id="p1218code4"><pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/*
 * CSS Reset based on code from 
 * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 * 
 */</span>
&nbsp;
html<span style="color: #00AA00;">,</span> body<span style="color: #00AA00;">,</span> div<span style="color: #00AA00;">,</span> span<span style="color: #00AA00;">,</span> applet<span style="color: #00AA00;">,</span> object<span style="color: #00AA00;">,</span> iframe<span style="color: #00AA00;">,</span>
h1<span style="color: #00AA00;">,</span> h2<span style="color: #00AA00;">,</span> h3<span style="color: #00AA00;">,</span> h4<span style="color: #00AA00;">,</span> h5<span style="color: #00AA00;">,</span> h6<span style="color: #00AA00;">,</span> p<span style="color: #00AA00;">,</span> blockquote<span style="color: #00AA00;">,</span> pre<span style="color: #00AA00;">,</span>
a<span style="color: #00AA00;">,</span> abbr<span style="color: #00AA00;">,</span> acronym<span style="color: #00AA00;">,</span> address<span style="color: #00AA00;">,</span> big<span style="color: #00AA00;">,</span> cite<span style="color: #00AA00;">,</span> code<span style="color: #00AA00;">,</span>
del<span style="color: #00AA00;">,</span> dfn<span style="color: #00AA00;">,</span> em<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">,</span> img<span style="color: #00AA00;">,</span> ins<span style="color: #00AA00;">,</span> kbd<span style="color: #00AA00;">,</span> q<span style="color: #00AA00;">,</span> s<span style="color: #00AA00;">,</span> samp<span style="color: #00AA00;">,</span>
small<span style="color: #00AA00;">,</span> strike<span style="color: #00AA00;">,</span> strong<span style="color: #00AA00;">,</span> sub<span style="color: #00AA00;">,</span> sup<span style="color: #00AA00;">,</span> tt<span style="color: #00AA00;">,</span> var<span style="color: #00AA00;">,</span>
dl<span style="color: #00AA00;">,</span> dt<span style="color: #00AA00;">,</span> dd<span style="color: #00AA00;">,</span> ol<span style="color: #00AA00;">,</span> ul<span style="color: #00AA00;">,</span> li<span style="color: #00AA00;">,</span>
fieldset<span style="color: #00AA00;">,</span> form<span style="color: #00AA00;">,</span> label<span style="color: #00AA00;">,</span> legend<span style="color: #00AA00;">,</span>
table<span style="color: #00AA00;">,</span> caption<span style="color: #00AA00;">,</span> tbody<span style="color: #00AA00;">,</span> tfoot<span style="color: #00AA00;">,</span> thead<span style="color: #00AA00;">,</span> tr<span style="color: #00AA00;">,</span> th<span style="color: #00AA00;">,</span> td <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">inherit</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">inherit</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">inherit</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">baseline</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #808080; font-style: italic;">/* remember to define focus styles! */</span>
<span style="color: #3333ff;">:focus </span><span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">white</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
ol<span style="color: #00AA00;">,</span> ul <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #808080; font-style: italic;">/* tables still need 'cellspacing=&quot;0&quot;' in the markup */</span>
table <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">separate</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border-spacing</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
caption<span style="color: #00AA00;">,</span> th<span style="color: #00AA00;">,</span> td <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
blockquote<span style="color: #3333ff;">:before</span><span style="color: #00AA00;">,</span> blockquote<span style="color: #3333ff;">:after</span><span style="color: #00AA00;">,</span>
q<span style="color: #3333ff;">:before</span><span style="color: #00AA00;">,</span> q<span style="color: #3333ff;">:after </span><span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
blockquote<span style="color: #00AA00;">,</span> q <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">quotes</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #ff0000;">&quot;&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css-reset/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Drop-Cap using CSS</title>
		<link>http://www.maggsweb.com/css/drop-cap-using-css/</link>
		<comments>http://www.maggsweb.com/css/drop-cap-using-css/#comments</comments>
		<pubDate>Mon, 28 Jun 2010 10:26:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=949</guid>
		<description><![CDATA[Drop-Cap&#8217;s without using images&#8230; &#8230;using CSS3 pseudo elements. ?View Code CSS#divName p:first-child:first-letter &#123; font-size: 130%; font-weight: bold; &#125;]]></description>
			<content:encoded><![CDATA[<p>Drop-Cap&#8217;s without using images&#8230;  &#8230;using CSS3 pseudo elements.</p>
<p><span id="more-949"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p949code6'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p9496"><td class="code" id="p949code6"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#divName</span> p<span style="color: #3333ff;">:first-child</span><span style="color: #3333ff;">:first-letter </span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span>	<span style="color: #933;">130%</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span>	<span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/drop-cap-using-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Font-size ReSize with JQuery</title>
		<link>http://www.maggsweb.com/css/font-size-resize-with-jquery/</link>
		<comments>http://www.maggsweb.com/css/font-size-resize-with-jquery/#comments</comments>
		<pubDate>Wed, 14 Apr 2010 11:24:00 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=873</guid>
		<description><![CDATA[Ever wondered how to do the Increase/Decrease font sizes without reload&#8230;? ?View Code JAVASCRIPT $(document).ready(function() { $(&#34;a.Styleswitcher&#34;).click(function() { $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); }); Then put the links somewhere prominent, most likely chganged to images. ?View Code HTML &#60;a class=&#34;Styleswitcher&#34; rel=&#34;default.css&#34; href=&#34;#&#34;&#62;Default Theme&#60;/a&#62; &#60;a class=&#34;Styleswitcher&#34; rel=&#34;red.css&#34; href=&#34;#&#34;&#62;Red Theme&#60;/a&#62; &#60;a class=&#34;Styleswitcher&#34; rel=&#34;blue.css&#34; href=&#34;#&#34;&#62;Blue Theme&#60;/a&#62;]]></description>
			<content:encoded><![CDATA[<p>Ever wondered how to do the Increase/Decrease font sizes without reload&#8230;?<br />
<span id="more-873"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p873code9'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p8739"><td class="code" id="p873code9"><pre class="javascript" style="font-family:monospace;"> $(document).ready(function() {
    $(&quot;a.Styleswitcher&quot;).click(function() {
        $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
    });
});</pre></td></tr></table></div>

<p>
Then put the links somewhere prominent, most likely chganged to images.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p873code10'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p87310"><td class="code" id="p873code10"><pre class="html" style="font-family:monospace;">    &lt;a class=&quot;Styleswitcher&quot; rel=&quot;default.css&quot; href=&quot;#&quot;&gt;Default Theme&lt;/a&gt;
    &lt;a class=&quot;Styleswitcher&quot; rel=&quot;red.css&quot; href=&quot;#&quot;&gt;Red Theme&lt;/a&gt;
    &lt;a class=&quot;Styleswitcher&quot; rel=&quot;blue.css&quot; href=&quot;#&quot;&gt;Blue Theme&lt;/a&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/font-size-resize-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS NoWrap</title>
		<link>http://www.maggsweb.com/css/css-nowrap/</link>
		<comments>http://www.maggsweb.com/css/css-nowrap/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 08:35:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.maggsweb.com/?p=714</guid>
		<description><![CDATA[I used to use NOWRAP in my &#8216;s often to ensure that columns didn&#8217;t &#8216;wrap&#8217; their contents &#8211; but have struggled to find an equivalent in CSS for a white. Until now: Short and simple equivalent for NOWRAP in a TD&#8230;? ?View Code CSS&#160; &#60;style language='text/css'&#62; td.fixed-width &#123; white-space:nowrap; &#125; &#60;/style&#62;]]></description>
			<content:encoded><![CDATA[<p>I used to use NOWRAP in my
<td>&#8216;s often to ensure that columns didn&#8217;t &#8216;wrap&#8217; their contents &#8211; but have struggled to find an equivalent in CSS for a white.<br />
<span id="more-714"></span><br />
Until now:<br />
Short and simple equivalent for NOWRAP in a TD&#8230;?</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p714code12'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p71412"><td class="code" id="p714code12"><pre class="css" style="font-family:monospace;">&nbsp;
&lt;style language<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'text/css'</span><span style="color: #00AA00;">&gt;</span>
  td.fixed-<span style="color: #000000; font-weight: bold;">width</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">white-space</span><span style="color: #00AA00;">:</span><span style="color: #993333;">nowrap</span><span style="color: #00AA00;">;</span>
  <span style="color: #00AA00;">&#125;</span>
  &lt;/style<span style="color: #00AA00;">&gt;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css-nowrap/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS &#8216;content&#8217; attribute</title>
		<link>http://www.maggsweb.com/css/css-content-attribute/</link>
		<comments>http://www.maggsweb.com/css/css-content-attribute/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 18:49:20 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=300</guid>
		<description><![CDATA[This is a new one, and pretty cool.  The &#8216;content&#8217; attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class. For example: ?View Code CSS&#160; a:after &#123; content: &#34;&#34; attr&#40;href&#41; &#34;&#34;; &#125; &#160; a.external:after&#123; content: &#34;(Link opens in a new window)&#34;; &#125; &#160; a.pdf:before [...]]]></description>
			<content:encoded><![CDATA[<p>This is a new one, and pretty cool.  The &#8216;content&#8217; attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class.</p>
<p><span id="more-300"></span></p>
<p>For example:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p300code14'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p30014"><td class="code" id="p300code14"><pre class="css" style="font-family:monospace;">&nbsp;
a<span style="color: #3333ff;">:after </span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;&quot;</span> attr<span style="color: #00AA00;">&#40;</span>href<span style="color: #00AA00;">&#41;</span> <span style="color: #ff0000;">&quot;&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
a<span style="color: #6666ff;">.external</span><span style="color: #3333ff;">:after</span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;(Link opens in a new window)&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
a<span style="color: #6666ff;">.pdf</span><span style="color: #3333ff;">:before </span><span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">&quot;&lt;img src='/img/abobe-icon.gif' width='16' height='16' border='0'&gt;&quot;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<ol>
<li>Would automatically add the content of the &#8216;href&#8217; attribute of the link code to the end (because we used &#8216;:after&#8217;) of the link text.</li>
<li>Would automatically add the quoted text to the end of the link text.  See how this is applied to a &#8216;class&#8217; of &#8216;external&#8217;.</li>
<li>This one adds an icon to the beginning of the link text, and is controlled by the &#8216;class&#8217;.  Imagine having classes for each type of document link&#8230;..</li>
</ol>
<p>Web 2.0?  Nah, this is CSS3!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css-content-attribute/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS fixes for IE, using Javascript</title>
		<link>http://www.maggsweb.com/css/css-fixes-for-ie-using-javascript/</link>
		<comments>http://www.maggsweb.com/css/css-fixes-for-ie-using-javascript/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 09:54:16 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=217</guid>
		<description><![CDATA[Some CSS effects don&#8217;t work in IE, damn them, so that leaves 2 options. Either forget that you have coded some nice roll-over effects that the majority of people wont see&#8230; Or, add an IE-specific javascript fix. ?View Code CSS&#60;!--&#91;if IE&#93;&#62; &#60;script type=&#34;text/javascript&#34; src=&#34;/content/iehover-fix.js&#34;&#62;&#60;!-- ---&#62;&#60;/script&#62; &#60;!&#91;endif&#93;--&#62;]]></description>
			<content:encoded><![CDATA[<p>Some CSS effects don&#8217;t work in IE, damn them, so that leaves 2 options.</p>
<p>Either forget that you have coded some nice roll-over effects that the majority of people wont see&#8230;</p>
<p>Or, add an IE-specific javascript fix.<br />
<span id="more-217"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p217code16'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p21716"><td class="code" id="p217code16"><pre class="css" style="font-family:monospace;">&lt;!--<span style="color: #00AA00;">&#91;</span>if IE<span style="color: #00AA00;">&#93;</span><span style="color: #00AA00;">&gt;</span>
&lt;script type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> src<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;/content/iehover-fix.js&quot;</span><span style="color: #00AA00;">&gt;</span>&lt;!-- ---<span style="color: #00AA00;">&gt;</span>&lt;/script<span style="color: #00AA00;">&gt;</span>
&lt;!<span style="color: #00AA00;">&#91;</span>endif<span style="color: #00AA00;">&#93;</span>--<span style="color: #00AA00;">&gt;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css-fixes-for-ie-using-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS3 and Rounded borders&#8230;</title>
		<link>http://www.maggsweb.com/css/css3-and-rounded-borders/</link>
		<comments>http://www.maggsweb.com/css/css3-and-rounded-borders/#comments</comments>
		<pubDate>Wed, 26 Nov 2008 08:16:37 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=198</guid>
		<description><![CDATA[&#8230;but still not on IE. ?View Code CSS&#60;div style=&#34; background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;&#34;&#62; &#60;/div&#62; -moz-border-radius-topleft -webkit-border-top-left-radius -moz-border-radius-topright -webkit-border-top-right-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius]]></description>
			<content:encoded><![CDATA[<h3>&#8230;but still not on IE.</h3>
<p><span id="more-198"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p198code18'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p19818"><td class="code" id="p198code18"><pre class="css" style="font-family:monospace;">&lt;div style<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot; background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;&quot;</span><span style="color: #00AA00;">&gt;</span>
&lt;/div<span style="color: #00AA00;">&gt;</span></pre></td></tr></table></div>

<p>-moz-border-radius-topleft<br />
-webkit-border-top-left-radius<br />
-moz-border-radius-topright<br />
-webkit-border-top-right-radius<br />
-moz-border-radius-bottomleft<br />
-webkit-border-bottom-left-radius<br />
-moz-border-radius-bottomright<br />
-webkit-border-bottom-right-radius</p>
]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/css3-and-rounded-borders/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Expressions in CSS / IE fix</title>
		<link>http://www.maggsweb.com/css/ie-fix/</link>
		<comments>http://www.maggsweb.com/css/ie-fix/#comments</comments>
		<pubDate>Tue, 02 Sep 2008 07:09:15 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[expressions]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[validation]]></category>

		<guid isPermaLink="false">http://tech.maggsweb.co.uk/?p=173</guid>
		<description><![CDATA[This wont pass CSS validation, but its usefull to know that expressions can be added into css. ?View Code CSS/* IE FIX */ #div &#123; overflow-x: auto; overflow-y: hidden; padding-bottom: expression&#40;this.scrollWidth &#38;gt; this.offsetWidth ? 15 : 0&#41;; &#125;]]></description>
			<content:encoded><![CDATA[<p>This wont pass CSS validation, but its usefull to know that expressions can be added into css.<br />
<span id="more-173"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p173code20'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p17320"><td class="code" id="p173code20"><pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/* IE FIX */</span>
<span style="color: #cc00cc;">#div</span> <span style="color: #00AA00;">&#123;</span>
  overflow-x<span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
  overflow-y<span style="color: #00AA00;">:</span> <span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span> expression<span style="color: #00AA00;">&#40;</span>this<span style="color: #6666ff;">.scrollWidth</span> &amp;gt<span style="color: #00AA00;">;</span> this<span style="color: #6666ff;">.offsetWidth</span> ? <span style="color: #cc66cc;">15</span> <span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/css/ie-fix/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Head in the clouds? Tag yourself.</title>
		<link>http://www.maggsweb.com/php/head-in-the-clouds-tag-yourself/</link>
		<comments>http://www.maggsweb.com/php/head-in-the-clouds-tag-yourself/#comments</comments>
		<pubDate>Mon, 30 Jun 2008 12:21:21 +0000</pubDate>
		<dc:creator>chris</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[tag cloud]]></category>

		<guid isPermaLink="false">http://www.cmaggs.co.uk/?p=42</guid>
		<description><![CDATA[I have been looking for a &#8216;simple&#8217; tag cloud generator that will parse content from MySQL for ages and couldn&#8217;t find one. So I adapted &#8211; and heavily modified (reduced) &#8211; and CSS&#8217;d &#8211; the best one that I could find. It turned out nice and simple. ?View Code CSS .size9 &#123; color: #000; font-size: [...]]]></description>
			<content:encoded><![CDATA[<p>I have been looking for a &#8216;simple&#8217; tag cloud generator that will parse content from MySQL for ages and couldn&#8217;t find one.  So I adapted &#8211; and heavily modified (reduced) &#8211; and CSS&#8217;d &#8211; the best one that I could find.  It turned out nice and simple.<br />
<span id="more-273"></span></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p273code23'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p27323"><td class="code" id="p273code23"><pre class="css" style="font-family:monospace;">  <span style="color: #6666ff;">.size9</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">26px</span><span style="color: #00AA00;">;</span>	 <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size8</span> <span style="color: #00AA00;">&#123;</span> 	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#111</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">24px</span><span style="color: #00AA00;">;</span>	 <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size7</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#222</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">22px</span><span style="color: #00AA00;">;</span>	 <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size6</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>	<span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size5</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#444</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">18px</span><span style="color: #00AA00;">;</span>	<span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size4</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">16px</span><span style="color: #00AA00;">;</span>	  <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size3</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span>	  <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size2</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#777</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span>	  <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size1</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#888</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span>	  <span style="color: #00AA00;">&#125;</span>
  <span style="color: #6666ff;">.size0</span> <span style="color: #00AA00;">&#123;</span>	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span>	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span>	  <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p><br/></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?" onclick="pageTracker._trackPageview('/outgoing/www.ericbess.com/ericblog/2008/03/03/wp-codebox/_examples?referer=');"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p273code24'); return false;">View Code</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p27324"><td class="code" id="p273code24"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
&nbsp;
<span style="color: #000088;">$terms</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array" onclick="pageTracker._trackPageview('/outgoing/www.php.net/array?referer=');"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$maximum</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$query</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/mysql_query" onclick="pageTracker._trackPageview('/outgoing/www.php.net/mysql_query?referer=');"><span style="color: #990000;">mysql_query</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;SELECT word, count FROM [tablename] WHERE display = '1'&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">// could add LIMIT, SORT, etc.. if required</span>
&nbsp;
<span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$row</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/mysql_fetch_array" onclick="pageTracker._trackPageview('/outgoing/www.php.net/mysql_fetch_array?referer=');"><span style="color: #990000;">mysql_fetch_array</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$query</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #666666; font-style: italic;">//create vars</span>
    <span style="color: #000088;">$word</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$row</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'word'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$row</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'count'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// set 'maximum' from counter</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$count</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$maximum</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$maximum</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$count</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//create array</span>
    <span style="color: #000088;">$elements</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array" onclick="pageTracker._trackPageview('/outgoing/www.php.net/array?referer=');"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'word'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$word</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'count'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$count</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
<span style="color: #666666; font-style: italic;">//random</span>
<span style="color: #666666; font-style: italic;">//shuffle($elements);</span>
<span style="color: #666666; font-style: italic;">//alphabetical</span>
<a href="http://www.php.net/sort" onclick="pageTracker._trackPageview('/outgoing/www.php.net/sort?referer=');"><span style="color: #990000;">sort</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$elements</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$elements</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$e</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// start looping through the tags</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// determine the popularity of this term as a percentage</span>
    <span style="color: #000088;">$percent</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/floor" onclick="pageTracker._trackPageview('/outgoing/www.php.net/floor?referer=');"><span style="color: #990000;">floor</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$e</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'count'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> <span style="color: #000088;">$maximum</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// determine the class for this term based on the percentage</span>
	<span style="color: #b1b100;">if</span> 	   <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">99</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">9</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">70</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">60</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">7</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">50</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">6</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">40</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">5</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">30</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">4</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">20</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$percent</span> <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#41;</span>		<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">else</span>						<span style="color: #000088;">$class</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// output this term</span>
    <span style="color: #666666; font-style: italic;">//with links...</span>
    <span style="color: #666666; font-style: italic;">//echo &quot;&lt;span class=\&quot;$class\&quot;&gt;&lt;a href=\&quot;search.php?search=&quot; . urlencode($k['term']) . &quot;\&quot;&gt;&quot; . $k['term'] . &quot;&lt;/a&gt;&lt;/span&gt;\n &quot;;</span>
  <span style="color: #666666; font-style: italic;">//without links.../</span>
    <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;span class='word size&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$class</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;'&gt;&quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$e</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'word'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;/span&gt;<span style="color: #000099; font-weight: bold;">\n</span> &quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
<span style="color: #666666; font-style: italic;">// for debugging....</span>
<span style="color: #666666; font-style: italic;">//echo &quot;&lt;hr /&gt;&quot;;</span>
<span style="color: #666666; font-style: italic;">//echo &quot;&lt;pre&gt;&quot;;</span>
<span style="color: #666666; font-style: italic;">//print_r($elements);</span>
<span style="color: #666666; font-style: italic;">//echo &quot;</span></pre></td></tr></table></div>

<p>&#8220;;<br />
?>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.maggsweb.com/php/head-in-the-clouds-tag-yourself/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

