This is a simple pie chart
Google offers Webmasters an easy solution to create simple or and quite complex graphs in the Google Chart API section of the Developers Guide. It is quite simple to use, if you want to create an image such as above, just link to the following image:
]http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Pie|Not%20Pie
Most coders and designers will tell you Internet Explorer (Especially IE6 below) is a pain to work with, but I tend to disagree. What most people forget is that even though IE is full of bugs and oddities everything can be fixed, with just a few lines of code.
Conditional Comments let you execute sections of code in just IE, so you can import custom CSS sheets (to deal with IE’s weird rendering engine) or special JavaScript; here is how to use conditional comments:
<!--[if IE]> This will only show for Internet Explorer (IE) <![endif]--> <!--[if !IE]> This will only show if the client is not using IE. <!--[endif]> <![if IE 6]--> Only shows on IE6 <!--[endif]> <![if lte IE 6]--> Any IE browser less than or equal to version 6. <!--[endif]> <![if gte IE 7]--> Any IE browser higher or equal to IE 7 <!--[endif]>
Just place snippets of the above code anywhere in your code. If you want more information conditional commenting take a look at the Conditional Comment Wikipedia page.
CSS is incredible, however its implementation in browsers has not been standardised, meaning that every browser has a slightly different default settings for how elements should be rendered. Luckily there is an easy fix in CSS to reduce the level of dissimilarity.
Add the following to the top of your CSS:
* {
margin: 0;
padding: 0;
color: #000;
background: #FFF;
font-style: inherit;
text-decoration: none;
font-size: 100%;
font-weight: normal;
}
Here is a really easy way to make a drop down list using CSS instead of JavaScript. This has many advantages over a JavaScript method, mainly it’s more search engine friendly and does not rely on users having JavaScript turned on.
<style type="text/css">
<!--
/* Style the links */
#exmaplebox a {
float:left;
text-decoration:none;
font-size:14px;
font-weight:bold;
height: 22px;
width: 100px;
text-align:center;
display:block;
padding: 0 10px 0 10px;
margin: 2px 10px;
border:1px solid #CCC;
}
#exmaplebox a:hover {
text-decoration:underline;
}
/* this bit is the drop down bit */
#exmaplebox ul {
float:left;
margin:0;
padding:0;
height: 26px;
width: 150px;
overflow:hidden;
list-style:none;
}
#exmaplebox ul:hover {
overflow:visible;
}
#exmaplebox ul li {
float:left;
width:300px;
margin:0;
padding:0;
}
-->
</style>
<div id="exmaplebox">
<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>
<a href="#link">Link</a>
</div>