WebAIM - Web Accessibility In Mind

E-mail List Archives

Drop down list, css, and xhtml

for

From: smithj7
Date: Apr 20, 2006 5:10PM

don't laugh... but I was happy to discover that I can even set up a css
style for drop down boxes which I use more or less to assist users to
get quickly from one item to another on a page. For example, I have a
page on "observances" I use an option box to let people jump to a
specific month. Here are some questions I have:

* Is it better set up my style sheet to use a division called
options in the html or just use a special paragraph class?
* Also is there a special way to set up a style for a submit
button? The parent organization uses a graphic which was sent to me to
use and I just changed the style on the button itself to make it look
like the required graphic because graphics as submit buttons have caused
problems for our users in the past.
* If you can add a button style to the css style sheet, how do I
put the button class in the html? This button style would be used
everywhere on the site so it could be a class of its own, but to me
there isn't anything to tag a class to a button. I don't see how it is
the same as <h1 class = something>

This is a sample of the html side. (note the css for the paragraph is
basic - bold and centered and required DOE font family)

<p class="option"><label for="menu">Select a Month</label><select
name="getLink" id="menu">

<option
value="http://dbs.myflorida.com/observe.shtml#January">January</option>

<!--will add more here -->
</select>

<input type="submit" style="font-size: 10px; font-weight: bold;
font-family: ariel; background: ffedca" value="Go"></p>

While this is a specific question, I'm not quite sure if I fully grasp
when it is better in the css style sheet to use the class that sets a
division verses the class that sets an individual item. (the pound
symbol verses the dot symbol and/or genric H1, H2...).

However, I have made all kind of little style sheets to see what would
happen and I can get the visual result. But I want to have a "clean
code" for the css style sheet. Having looked at several style sheets, I
am seeing what seems to be redunancy. My understanding from programming
CLASSES (c++ and java) is that inheritancy is the rule in a style sheet.
So I think you could set up a p class with many values, then within a
division class only change something that would differ from this p
class. The other items would default to the p class description.

Note I understand inheriancy as it relates to the iimported style sheet,
the page style sheet, the style added to an item on a page - just
confused how the division style in a css style sheet effects the whole.
I'm hoping that I never again have a imported style sheet, a page style
sheet, and a special style sheet. Currently, that is what I use on my
site. I didn't use the the html <div> text <div> at all. He..he.. I'm
also changing my site to comply with xhtml and have been reading about
it as well as xml. I'm going through the slow process of conversion
now.

While I gravely underextimated the time it would take for me to convert
the site to a tableless format using css and xhtml, my little practice
pages unless I'm going crazy seem to make the page display more quickly
and if I get the css style sheet right the first time, I will spend less
time making individual pages. (e.g. the library for the blind sends me a
newsletter that has books. I never thought about setting up a "cite
class". Four times a year I made the text "look" like a book cite. Live
and learn and you guys are teaching me! I promise, as I learn more, I
will share this knowledge with other web people in Florida!