Veerle's blog

Maybe some of you are familiar with this I.E. bug, but I wasn’t until recently. While working on a project and going out of my mind wondering why my margin on the left had this huge gap, I started to search the web for some solution. Since I did all sorts of tricks with it, I was almost 100% sure that it must be another I.E. bug that I didn’t know of. I’m still learning since I started with CSS2 just in January of this year…

A few weeks ago I posted an article about the collapsing effect you get when a float is contained within a container box that has a visible background and how you can solve this problem. It seems that there is a smatter solution that involves no extra code in the HTML to solve this.

I’ve found an interesting article on how to clear floats without structural markup. This page explains why this effect happens and how to solve it in both the “old-fashion” way (using “clear:both” and 1 line of HTML code) or the smarter way (no HTML code needed) using the :after CSS 2 property.

Some time ago I promised that I would make a post about a comparison of CSS Edit en StyleMaster. They are both great CSS tools to use to style your webpages. Now that I have used both programs for a while, I think I can give some opinion and list you my pros and cons. But bear in mind that there is a huge price difference between these 2 programs and so in my opinion we can’t make a “fair” comparison by mentioning the pros and cons. Still, I want to do it this way just to give you an overview.

A friend and reader of my blog, Travis Crips, helped me out on a webpage design in CSS. I got stuck on some errors and didn’t know how to fix them. Travis found the error and pointed me at some interesting floating issues that I would like to share with you…

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.