Veerle's blog

Today I took the challenge to style a form in CSS instead of a traditional table. With forms it's always not that obvious to use CSS instead of table tags.

First of all I created backgrounds for my labels and for my fields on the right. The left (.col1) and right (.col2) columns are defined by a class each linked with a background image and a set of properties and values.

• Here is my CSS form example that I like to share with you.

This has been tested on Mac in Safari (1.2.1), Netscape 7 and FireFox 0.8 and on Windows XP in Internet Explorer 6 and Netscape 7, Mozilla and FireFox 0.8. But I seem to have floating problems on Mac in Netscape 6.2 and Internet Explorer 5.5.

Interesting tutorials on this kind of matter:

• Designing a form using CSS layouts
• Adding Style to Forms with CSS
• Fun with forms - customized input elements
• Style Webforms Using CSS

Considering the time I've spent to create this simple form without any table tags I'm wondering if it's worth in this case just to avoid table tags? It's not that this form needs any complex table code and that it will slow down loading time. Besides this looks a bit like tabular data, no? Anyway I just wanted to give it try and see if this would be doable.

Designing a web-page is one thing but converting into a web-page is something totally different. Today I want to share my experience on how I start this job. I can imagine that for an experienced web designer most steps will be obvious and crystal clear but for the less experienced ones there are a lot of question marks. 

I’m not blogging that long, only since September 2003. Before September I didn’t even know what blogging was, so you can say I am a newbie ;-) My dot Mac account got me started, as a member gift I got iBlog . At first it wasn’t that bad but then I updated the program to a newer version and everything went seriously wrong and I lost all my previous entries.

If you want Firefox 0.8 to look just like Apple’s Safari you’re in luck, there is now a Firefox 0.8 Safari theme. Just a little bit of warning this is no stuff for the faint of heart since the process requires seven steps in serious modifying. It is for people who highly customize their machines and know what they are doing! There seems to be a demand for this since it already has been downloaded 10.000 times!!!! I am just the messenger so don’t shoot me if your system is acting funny.

I promised to keep you up-to-date, so here it goes... I'm still not there yet but I got some extra big help from a member of my blog, Travis. He did an amazing job by adding another script for the submenu and he also turned my tabled layout into CSS. Except for the dropdowns, everything is rendered by CSS now. Thanks Travis! :-) And to the others as well.

• The updated stylesheet
• The updated layout rendered by CSS