Form styling test

 

                select one select two select three

textarea field

radio button  check box      

This is the form in your current browser. Look at the source to see the style definitions.

The brown text style is set in the body style definition and affects
the captions on the radio and checkbox buttons as well as the rest of the page

The screenshots below show how different this form can look in various browsers.

The dotted line encloses the #typein div that styles text input areas
without affecting the Submit and Clear button.
The Select (popup) is unaffected by being inside the #typein div as it's not an 'Input' item.
 

Explorer 6.x (WinXP)

IE6 (WinXP) adopts all the form element styling as expected. The input and text areas have their intended color schemes
but note how the text inside has dropped. The 3px padding specified has only worked at the top.

 

 

Explorer 5.x (Mac)

IE5 (Mac) also displays the borders and background colours as expected and gets the padding right.
The Submit and Clear buttons don't look right though.

 

 

 Mozilla 1.7

Mozilla 1.7 (Mac) gets most things right.
The alignment of the bottom of the radio and check box buttons with their captions is a bit off.
Note that Mozilla only displays a scrollbar when needed. It's not here!

 

 

Safari 1.2 (Mac)

Safari makes little attempt at styling form elements. Only the font specs seem to work.

 

 

Opera 7.x (Mac)

 

Like Safari, Opera 7.5 (Mac) ignores most form element specs - and clips the bottoms of the buttons.