For some reason I can't get a vertical nav button set to be the same width. Width is being determined by the number of characters of content in the button. the min-width and width calls aren't doing the trick. Can someone help?

#button1 ul { 
  min-width: 300px;
  padding: 5px; 
  list-style: none; 
  text-align: left; 
  font-size: 1.3em;
  background-color: #fff; 
  } 
 
#button1 ul li {  
  display: block; 
  margin: 25px 0 25px 0;
  padding: 12px 0 0 0; 
  } 
 
#button1 ul li a { 
  width: 2em;
  border-top: 1px solid #67527a;
  background: #3b185a;
  background: -webkit-gradient(linear, left top, left bottom, from(#67527a), to(#330c57));
  background: -webkit-linear-gradient(top, #67527a, #3b185a);
  background: -moz-linear-gradient(top, #67527a, #3b185a);
  background: -ms-linear-gradient(top, #67527a, #3b185a);
  background: -o-linear-gradient(top, #67527a, #3b185a);
  padding: 12px 24px;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 11px;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #ffffff;
  font-size: 1.3em;
  text-decoration: none;
  vertical-align: middle;
  } 
 
#button1 ul li a:hover { 
  border-top-color: #3b185a;
  background: #3b185a;
  color: #f2f769;
  }

what is the url?

http://depts.washington.edu/uwhsa/login/

where do you think that css should be applied? i.e. what html element has a ID of 'button'?

Here is the HTML for the page utilizing the above CSS.

<div id="button1">
<ul>
	<li><a href="http://depts.washington.edu/uwhsa/login/supervisors/">HSA Supervisors</a></li>
	<li><a href="http://depts.washington.edu/uwhsa/login/ipe-committee/">IPE Committee</a></li>
	<li><a href="http://depts.washington.edu/uwhsa/login/uw-healthcare-component-compliance-group">Healthcare Compliance</a></li>
</ul>
</div>

I do not see that HTML in the source of the page you pointed to.