CHAPTER 17 ■ LAYOUTSStyling cont. I further styled the second submit button by removing its border and setting it to the exact
height and width of its background image. When the button is hovered over, the
#submit2:hover rule moves the background image down and right by 1 pixel to make it look
like it’s being depressed. The remaining buttons in the example are styled by the button
class.
I use the button class to normalize the display of all buttons by setting margin, padding, and
font-size. This is important because browsers use different default values. I set the mouse
pointer to cursor:pointer to further signal that the button is clickable.
You can use any box styles to style a button. In the example, I set the background to a
horizontally tiled gradient image that is lighter at the top and darker at the bottom to create
a raised button effect. When the mouse hovers over the button, I change the background to
a gradient image that is darker at the top and lighter at the bottom to create a depressed
button effect. Likewise, I use lighter top-left borders and darker bottom-right borders when
not hovered over and the reverse when hovered over.
Limitations submits the coordinates of where its image is clicked. I don’t
recommend using it to process coordinates because nonsighted users can’t see to click
different areas of its image. A client-side image map is an accessible solution (see Image
Map in Chapter 14).
Because Internet Explorer 6 only responds to a:hover, I also use the .hover class and
JavaScript to simulate :hover. Internet Explorer 7 and the other major browsers don’t need
this JavaScript workaround.
If you omit the name attribute of a submit button, its value isn’t submitted along with the
rest of the form. For consistency, you can set a button’s id attribute to the same value as its
name attribute.
The name and id attribute must not be the same name as a DOM element method, because
this prevents you from executing the method. For example, if you give a submit button a
name or id of “submit”, you can’t execute document.getElementById("submit").submit(),
which prevents you from submitting the form using JavaScript. The same applies to “reset”.
JavaScript In the example, I use each button’s unique ID to assign event handlers.
This example shows how easy it is to extend the Event Styling framework with your own
custom functions.
Related to Event Styling; Inline Elements (Chapter 2)