how to use css and <li> to make a 1 to 50 pixel square with no border

Question

I'd like to use different sized squares from a to make pie shapes, but I'm having trouble with the css to make a square one pixel in height and width with no borders. Here is my current css

#q-graph {position: relative; width: 300px; height: 300px;  margin: 1.1em 0 3.5em; padding: 0;  background: #DDD;  border: 2px solid gray; list-style: none;  font: 9px Helvetica, Geneva, sans-serif;}
#q-graph ul {margin: 0; padding: 0; list-style: none;}
#q-graph li {position: absolute; bottom: 0; width: 150px; z-index: 2;  margin: 0; padding: 0;  text-align: center; list-style: none;}
#q-graph li.bar {position: absolute; width: 1px; height: 1px; border: none }
#q-graph li.bar p {margin: 5px 0 0; padding: 0;}

and here is a bit of the pie slice

<ul id="q-graph">

<a href='blah.com'><li class='bar' style='left:2px; top:126px; width:37px; height:37px; background:blue;border-color:blue;'></li></a>
<a href='blah.com'><li class='bar' style='left:9px; top:164px; width:37px; height:37px; background:blue;border-color:blue;'></li></a>

I'd like help with this as my CSS skills seem to be inadequate for the task.

This is what it looks like at the moment

Answer 1

Well, the answer to your question would probably be "Remove the 'width:37px; height:37px;' from your inline css."