I am not actually focusing on Web Design, but as a Web Developer, I can’t skip that part. Designing a page, especially a data entry form, is such a pain during my previous projects.
One of the biggest mistake I’ve done is to use the DIV tag all throughout the page. The reason why I am using so may DIVs as container is that I need to wrap some elements in order to apply width to them. However, after applying some width to a block level element (div in my case) bugs occurred in IE6 when I need to put some margin or padding left as not to put the text so close to the edge of the container.
Take this example:
<div class="row">
<div class="col1">
<span>Label</span>
</div>
<div class="col2">
<input type="text" name="test1" id="test1" />
</div>
</div>
<div class="row">
<div class="col1">
<span>Label 2</span>
</div>
<div class="col2">
<input type="text" name="test2" id="test2" />
</div>
</div>
What I want above is just to put the labels and input boxes aligned in columns for several rows. That is how I design during those days. I get the exact layout the way it looks on the specification, but I feel guilty every time I see those nested DIV several levels. I feel bad when I need to float those DIVs just to place them side by side.
I now realize that there are so many meaningful tags that I can use instead of DIV.
So the modified or shall we say enhanced version of the code above will be:
<p class="row">
<span class="col1">
<label for="test1">Label</label>
</span>
<span class="col2">
<input type="text" name="test1" id="test1" />
</span>
</p>
<p class="row">
<span class="col1">
<label for="test2">Label 2</label>
</span>
<span class="col2">
<input type="text" name="test2" id="test2" />
</span>
</p>
That way, tags are not uniform all throughout the page, thus giving each containers its meaning and purpose. However, the same CSS were applied to them just like the way it was when they were DIVs.