Being “a visual type” – as Eric Meyer puts it – and handcoding my webpages as much to the web standards as possible for my overloaded brain to cope with – I’ve come to love CSS as it’s a great techniques to work with. On a positive note – it allows us to fight the browsers and – with a few battles here and there, a few cups of coffee later – achieve a nicely grafted layout which reflects our design concept. Great.

Then, there comes the contact page, blog comments or generally any page using any type of form. And out goes the joy and visual continuity of CSS styling…. :”(

When I first started using CSS – learning from the masters out there – I found forms to be the biggest stumbling block in my understanding of the rules and their application. What started to make sense – no longer did when it came to the form elements… Eventually, of course, reading enough posts, tutorials and reference material – I realised that it would be a hopeless endeavour to try to understand… So you learn to cope, not ideal but the best you can do, right? ;)

To take one of my current projects as an example – while the site is being built the domain shows a holding page with contact form: http://organikrocka.com. The look and feel of the site is textured, warm cardboard brown with black. As the current page is intended to give a flavour of the final site – just the thought of styling the form brought on a headache, already getting frustrated in anticipation of the obvious problems – and unfortunately the end result is somewhat unresolved…
I tried several different approaches in the CSS, even experimented with changing the design and feel of the page itself to tie in the form elements – and in the end resorted to using Javascript to replace the now rather ugly, misaligned and at times distorted appearance of the check box.

The screenshot below shows the final solution with Javascript replaced checkbox – and below the check box appearances in different broswers after my endless CSS edits – or how the check boxes would look with Javascript disabled. And in this case it was not even the standard check box visual itself which turned out to be the biggest pain in the ***** (pain in the brain!). Applying styling to the form resulted in a very inconsistent display of the box itself across different browsers. I just couldn’t get it to look right… :”(

So I finally did replace the standard checkbox with a graphic I created, with Javascript. I usually don’t edit the form elements in this way, I do care about usability and accessibility and am aware that this is not fully compliant. In an attempt to remain within the realms of usability and the familiarity with the commonly known check box – my graphic still shows the small, square, white box, only as flat graphic to suit the overall visuals and with some additional purely decorative elements. It is not ideal and though the form still looks very different in the different browsers – at least its layout is now even.

Following Eric’s posts on resetting styles and particularly reading his recent post on ‘formal weirdness‘ – the strange results for any styling applied to forms are slowly starting to make more sense. I’m a big fan of the universal resetting of margin and padding – it gives me back control over my layouts (apart from – IE what else :”(….). The universal reset is great – short and sweet and just works – well, apart from forms… of course :”( But I don’t really like the idea of the big chunk of code preceeding my CSS either, merely to accomodate the form pages. So I thought I would most likely stick with it and try to compensate for the forms within my CSS where needed.

Reading about the ‘formal weirdness‘ however… I think I’ll have to reconsider my opinion and change my working methods after all – thanks, Eric…