blueprint css - select tag in rails

Currently working on rails 3.

I made changes in my css file to add a width of 330px to the size of the select drop-down menu by making the following changes:

select {
   width: 330px;
{

The problem开发者_开发问答 is, there is another page I want to have drop-down menus using the select tag where I want the width to be 230px. I tried adding a class to the select tag but it didn't work:

select.ul-item {
   width: 230px;
{

This is the view page where I want the drop-down menu to be 230px.

<ul>
  <li><%= select_tag(:gender, options_for_select(['Male', 'Female', 'Unisex'])) %></li>
  <li><%= select_tag(:age_range, options_for_select(['Birth-12 Mos.', '12-24 Mos.', '2 Years', '3-4 Years', '5-7 Years', '8-11 Years', '12+ Years'])) %></li>
</ul>

What am I doing wrong?

UPDATE ONE

This is what is on the page source:

  <div class="span-6">

<ul>
  <li><select id="gender" name="gender"><option value="Male">Male</option><option value="Female">Female</option><option value="Unisex">Unisex</option></select></li>
  <li><select id="age_range" name="age_range"><option value="Birth-12 Mos.">Birth-12 Mos.</option><option value="12-24 Mos.">12-24 Mos.</option><option value="2 Years">2 Years</option><option value="3-4 Years">3-4 Years</option><option value="5-7 Years">5-7 Years</option><option value="8-11 Years">8-11 Years</option><option value="12+ Years">12+ Years</option></select></li>
</ul>

UPDATE TWO - SOLVED

Oddly enough, what actually worked is this:

#gender, #age_range {width: 230px}

I don't understand why it works without the selector but it works. Who knew. Thanks for helping on the answer.

Your CSS selector:

select.ul-item 

is looking for a select tag with a class of ul-item

No where in your HTML is there a select tag with that class. That's the problem.

Try this

select#gender, select#age_range{
  width: 230px;
}

Try making the selector as powerful as possible.

body div.span-6 ul li select#gender,
body div.span-6 ul li select#age_range {
  width: 230px;
}

Or try adding !important to the width property.

Oddly enough, what actually worked is this:

#gender, #age_range {width: 230px}

I don't understand why it works without the selector but it works. Who knew. Thanks for helping on the answer.