How to apply different widths to textboxes and dropdowns using css

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

I have 2 regions in all my web app's pages.
In the first region, I want to apply one width to textboxes, and
another to dropdowns.
In the second region, I need to do the same thing but with different
I have a solution that uses attribute selectors, but I have just
found out that this does not work in IE6.
Is there an easy way therefore to differentiate between textboxes and
dropdowns and apply the widths accordingly using css.

The css code that I am currently using is (NB this is a bit messy, but
it is the first css I've written):

/*Channel Containing page*/
#allChannelsSection input[type="text"]{width: 294px; color:Black}
#allChannelsSection select{width: 300px; color:Black}
#allChannelsSection textarea{color:Black; width: 294px; height:100px}

/*Channel User Control*/
#channelSection .timeDropDown{width: 42px}
#channelSection table{width: 600px}
#channelSection input[type="text"]{width: 594px; color:Black}
#channelSection select{width: 600px; color: Black}
#channelSection .smallDropDown
#channelSection h1{color:Black; font-family:Helvetica, Arial, Sans-
Serif; font-weight:lighter; text-align:center; vertical-align:top;
letter-spacing:1px; font-size:1.5em}

I'd like to be able to avoid needing to give each control a reference
to a class - I have a lot of controls on my forms and I risk missing
some out!



Site Timeline