I'm cleaning old code and replacing tables used to display forms. I'm using the div/span approach to it. Each row is a div. Each form element is encased in a span that floats in the div.
In this case, using Firefox both span and divs look the same. In IE, the div is offset compared to the span. Why is that?
What I'd like to know, in this method of mine, would it be better to use span or div? Or should I be using a different approach?I've found that tables are still semantic when dealing with forms. The form label is a table header and the form input is the table data cell.
<table cellpadding="0" cellspacing="5" border="0" class="formTable">
<tbody>
<tr>
<th><label for="">Form Label</label></th>
<td><!-- Form Input Element --></td>
</tr>
</tbody>
</table>
As far as IE-Win offsetting the float, you're probably running into the IE-Win 3px margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->).just an idea, but all (well most) form elements are stylable - why not style those to get your desired effect?
Other than that, I'd say that an input within a span might be a questionable way to put semantic validatable code together (wow that was a complex sentence!)
Do you have an image of what you're trying to achieve?Unfortunately, I don't have an image. Nor do I have explicit goals. I'm just trying to have a nice way to make forms without tables and have default "placement" behavior.
I was wondering what would have been better to encase the cells within the rows. I can easily switch from spans to divs. I was just wondering which one was the optimal.
In my case, each div.cell will contain a label and an input of some sorts.I find that by marking up my forms something like the following, I have plenty of element "handles" avaialble to get various format options with CSS:
<form action='#' method='post' id='formid'>
<fieldset>
<legend>fieldset title</legend>
<p><label for='field1'>Field 1:</label>
<input type='text' name='field1' id='field1' size='20' maxlength='20'></p>
<p><label for='field2'>Field 2:</label>
<input type='text' name='field2' id='field2' size='20' maxlength='20'></p>
</fieldset>
<fieldset>
<legend>fieldset title</legend>
<p><label for='field3'>Field 3:</label>
<input type='text' name='field3' id='field3' size='20' maxlength='20'></p>
<p><label for='field1'>Field 4:</label>
<input type='text' name='field4' id='field4' size='20' maxlength='20'></p>
</fieldset>
<p class='submit'><input type='submit' value='Submit'></p>
</form>NogDog, I have pretty much the same setup, but I use div instead of P. Fieldsets are legends have been part of routine for a while now as well.
I'll enclose each label and input pair into it's own div, in order to be able to manipulate each pair individually on each line. My previous attachement gives an example.
In this case, using Firefox both span and divs look the same. In IE, the div is offset compared to the span. Why is that?
What I'd like to know, in this method of mine, would it be better to use span or div? Or should I be using a different approach?I've found that tables are still semantic when dealing with forms. The form label is a table header and the form input is the table data cell.
<table cellpadding="0" cellspacing="5" border="0" class="formTable">
<tbody>
<tr>
<th><label for="">Form Label</label></th>
<td><!-- Form Input Element --></td>
</tr>
</tbody>
</table>
As far as IE-Win offsetting the float, you're probably running into the IE-Win 3px margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->).just an idea, but all (well most) form elements are stylable - why not style those to get your desired effect?
Other than that, I'd say that an input within a span might be a questionable way to put semantic validatable code together (wow that was a complex sentence!)
Do you have an image of what you're trying to achieve?Unfortunately, I don't have an image. Nor do I have explicit goals. I'm just trying to have a nice way to make forms without tables and have default "placement" behavior.
I was wondering what would have been better to encase the cells within the rows. I can easily switch from spans to divs. I was just wondering which one was the optimal.
In my case, each div.cell will contain a label and an input of some sorts.I find that by marking up my forms something like the following, I have plenty of element "handles" avaialble to get various format options with CSS:
<form action='#' method='post' id='formid'>
<fieldset>
<legend>fieldset title</legend>
<p><label for='field1'>Field 1:</label>
<input type='text' name='field1' id='field1' size='20' maxlength='20'></p>
<p><label for='field2'>Field 2:</label>
<input type='text' name='field2' id='field2' size='20' maxlength='20'></p>
</fieldset>
<fieldset>
<legend>fieldset title</legend>
<p><label for='field3'>Field 3:</label>
<input type='text' name='field3' id='field3' size='20' maxlength='20'></p>
<p><label for='field1'>Field 4:</label>
<input type='text' name='field4' id='field4' size='20' maxlength='20'></p>
</fieldset>
<p class='submit'><input type='submit' value='Submit'></p>
</form>NogDog, I have pretty much the same setup, but I use div instead of P. Fieldsets are legends have been part of routine for a while now as well.
I'll enclose each label and input pair into it's own div, in order to be able to manipulate each pair individually on each line. My previous attachement gives an example.