Stylesheets - Form Layout Puzzle in IE

Author

Form Layout Puzzle in IE

Tom

2005-01-24, 7:21 pm

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

Steve Pugh

2005-01-24, 7:21 pm

"Tom" <klenwell@XXXXXXXXXX> 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 <steve@pugh.net> <http://steve.pugh.net/>

Tom

2005-01-24, 11:17 pm

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

Thanks. This solved the problem.