Form Layout Puzzle in IE

[Tom]

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="&laquo;
BLANK &raquo;">
</div>

<div id="acc_invoice_amount" class="">
<label>Invoice Amount: </label>
$<input type="text" name="acc_invoice_amount" size="10" value="&laquo;
BLANK &raquo;" 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="&laquo;
BLANK &raquo;" style="text-align:right;">
</div>

</div>

Any help or advice would be appreciated.

Tom

[Steve Pugh]

"Tom" <kl******@gmail.com> wrote:

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?
Only if you clear the preceeding floats.
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).
No, just add clear: left; to the styles for the divs.
(Also, IE renders the background of some fields yellow for no reason I
can discern.)

You have the Google toolbar installed.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Tom]

> You have the Google toolbar installed.
That's true I do.

Thanks. This solved the problem.