HTML and CSS Reference
In-Depth Information
Figure 12-18. The form is neatly laid out using CSS table display
13. The exceptions are IE 8+, which distort the <select > menu and submit button. Add
the following style rule to change their display property to inline-block :
input[type="submit"], select {
display: inline-block;
}
Changing the way the <select > menu and the submit button are displayed fixes the problems with Internet
Explorer without affecting other browsers. This is thanks to the creation of an anonymous table cell around
them. However, it highlights that—useful though it is—CSS table display doesn't provide a rock-solid
answer to layout problems.
It's also unfortunate that <fieldset > elements aren't handled in the same way as other form elements. Still,
it's a convenient way to style grid-like forms without being encumbered by HTML table markup.
Improving Accessibility with a “Skip to Main Content” Link
Blind and partially sighted people frequently access the Web using screen readers, assistive technology that reads
the content of a web page aloud. Listening to the same content, such as a navigation menu, over and over again
becomes tedious, making your site less user-friendly to disabled people. So, it's often a good idea to create a “skip
to main content” link to allow them to get to the meat of the page, particularly if the sidebar content comes before
the main content.
Assuming that your main content is in a <div> with an ID, you just link to the <div> by prefixing the ID with a
hash sign like this:
<a href="#main">Skip to main content</a>
 
Search WWH ::




Custom Search