|
| Been banging my head against my monitor that last hour on this.
The code below renders how I would expect in Firefox -- i.e. a nice
even column for the labels in the form. But in IE, each line gets
successively indented the width (175px) of the label style. You can
see what I mean (in IE) here:
http://www.ttusa.us/test/forms/complaint.php
Each line is it's own DIV block, so shouldn't they be reset to the
left?
One solution is to add a cleared linebreak (<br clear="all"> ). Still
I'd like to understand the logic of what's happening in IE (if there is
any).
(Also, IE renders the background of some fields yellow for no reason I
can discern.)
Here's the relevant code:
HEAD:
#form_block {
margin:0;
padding:5px;
}
label {
color:#666;
float:left;
width: 175px;
}
input, #input {
color:#336699;
display:inline;
}
BODY:
<div id="form_block">
<p><b>Please fill the information below:</b></p>
<div id="acc_invoice_num" class="">
<label for="acc_invoice_num">Invoice Number: </label>
<input type="text" name="acc_invoice_num" size="20" value="«
BLANK »">
</div>
<div id="acc_invoice_amount" class="">
<label>Invoice Amount: </label>
$<input type="text" name="acc_invoice_amount" size="10" value="«
BLANK »" style="text-align:right;">
</div>
<div id="acc_amount_paid" class="">
<label>Amount Paid: </label>
$<input type="text" name="acc_amount_paid" size="10" value="«
BLANK »" style="text-align:right;">
</div>
</div>
Any help or advice would be appreciated.
Tom
|
|