<style>

#vertgraph { 

width: 378px; 

height: 207px; 

position: relative; 

background: url("g_backbar.gif") no-repeat; 

}

#vertgraph ul { 

width: 378px; 

height: 207px; 

margin: 0; 

padding: 0; 

}

#vertgraph ul li { 

position: absolute; 

width: 28px; 

height: 160px; 

bottom: 34px; 

padding: 0 !important; 

margin: 0 !important; 

background: url("g_colorbar3.jpg") no-repeat !important;

text-align: center; 

font-weight: bold; 

color: white; 

line-height: 2.5em;

}

 
#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }

#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }

#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }

#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }

#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }

</style>

<div id="vertgraph">

<ul>

<li class="critical" style="height: 150px;">22</li>

<li class="high" style="height: 80px;">7</li>

<li class="medium" style="height: 50px;">3</li>

<li class="low" style="height: 90px;">8</li>

<li class="info" style="height: 40px;">2</li>

</ul>

</div>