Form styling test



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)

IE 6 form styles

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)

IE 5 form styles

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

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

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



Opera 7.x (Mac)

 opera form styles

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