WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Drop down list, css, and xhtml

for

From: Tim Beadle
Date: Apr 21, 2006 2:30AM

On 21/04/06, smithj7 < <EMAIL REMOVED> > wrote:
> 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:

Bear in mind that these questions might be better answered at a
CSS-specific resource like CSS-Discuss - http://www.css-discuss.org/

I will try to answer your questions, however.

> Is it better set up my style sheet to use a division called options in the
> html or just use a special paragraph class?

Technically, the <p> element is for paragraphs of text, so you're
better off using the generic <div> or the specific-for-forms
<fieldset>.

> 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.

You can use the <button> element instead of <input type="submit">,
which allows you to target it in your stylesheet in a more reliable
way. (Note that you could use input[type="submit"] { /* styles */ }
but IE wouldn't recognize this syntax).

> 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>

It's fine to use <input type="submit" class="button" /> but I would
suggest looking into the <button> approach. See here:
http://www.w3.org/TR/html4/interact/forms.html#h-17.5

> 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>

It's normally best (if you're going to use the style in more than one
place) to define your styles in a CSS class and use that, rather than
the inline styles you have here.

> 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...).

I'm not sure I understand what you mean by "a class that sets a division".

There are several types of CSS selectors:

* element selectors, e.g. p
* class selectors, e.g. .warning (your "dot symbol")
* id selectors, e.g. #header (your "pound symbol")
* descendant selectors, e.g. #header h2 - this means "apply this style
to any h2 elements that are descendants of the element with the id of
'header'".
* parent-child selectors, e.g. #content>h1 - this means "apply this
style to any h1 element that is a direct child of the element with the
id of 'content'".

Can I suggest looking at this tutorial? It's all covered here:
http://css.maxdesign.com.au/selectutorial/

> 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.

I still don't get what you mean by "division class". Again, the
tutorial I linked to above may help your understanding of CSS
inheritance and the cascade.

> 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.

It's a good idea - valid markup (whether that's HTML 4.01 or XHTML 1.1
doesn't really matter, as long as you choose one and stick to it) is
the best foundation for any CSS-based layout. Invalid markup makes
debugging layout problems so much harder.

> 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!

Well done for biting the bullet and making the switch. It's a widely
accepted truth that ditching tables for layout, while being the right
thing to do from a HTML purity perspective, is also a very good thing
to do from an accessibility perspective.

You may find the following resources helpful:
www.alistapart.com
www.bitesizestandards.com
www.thinkvitamin.com

Best regards,

Tim