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.

I’ve been using a demo version of Style Master for about 3 weeks now and I must say there are several cool features I like. First thing I like a lot about Style Master is the fact that your code mode is still visible while you add a property to your statement through the sliding menus. You see a live-update of your code while doing this.

By starting all over again I was able to fix the "jumping" error in IE 6
(see my post the day before yesterday).

Today I had to do a rush job in CSS and XHTML. All went smoothly until I previewed my work in Internet Explorer 6 on PC. My buttons kind of jump or move when you roll over them and my fly-out submenus isn’t perfectly positioned either, it partially overlaps the main menu and they appear below my content on the right…. First thing you’ll notice is that I use table tags, but I’m still in the middle of things and I’m going to change this at a later stage when I have more time. Right now the only thing that matters is getting this menu right.

I’ve found the solution on my 2 leveled navigation. Many thanks to Jack Burman for pointing me in the right direction to fix the problem of the gab. I replaced the "float:left" with "position:absolute" (top: 22px) for #smenu1, #smenu2, #smenu3 and #smenu4 together with a left offset of 0px for each iteration.