div below div in IE; div overlays div in FF, Safari

div overlay

[aes2]

In the following CSS

.field{width:375px; height:auto;}
.field_name{width:375px; height:16px;}
.field_input{width:375px; height:23px;}
.field_input input{width:360px; height:17px; border:1px solid #cccccc; padding-left:2px;}

and HTML

<div class="field">
<div class="field_name">*Name:</div>
<div class="field_input">
<input id="name" type="text" value="" name="name"/>
</div>
</div>
<div class="field">
<div class="field_name">Company Name:</div>
<div class="field_input">
<input id="company_name" type="text" value="" name="company_name"/>
</div>
</div>

I get the caption "*Name:" above an input field, and the caption "Company<br>Name" (on two lines) below, and an input field below that all looking good in IE6.

The same page in FF 3.5 on Windows and FF 2.0 on an old Mac and Safari 1.3 on the same old Mac all show the caption "*Name:" above its input field, but the "Company Name:" caption is in the same position as its field, and the field occludes its caption.

Firebug shows the "Company Name:" caption's box way too narrow to hold it on one line, so I shortened it to "Firm:" with the same results. IE 6 displays "Firm:" on one line and its field nicely placed below it. FF and Safari both display the input field occluding its caption.

I didn't write this page, and I'm not a CSS expert. Help? Thanks.

[swa66]

As always when legacy IE versions disagree with the rest of the browsers: it's IE that's wrong, even if it happens to do -by accident- what you want.

IE6 treats height as if it were min-height, so I'd remove all of those height statements, or set those that are relevant for your layout to min-height instead.

[aes2]

Thanks. I changed all height to min-height on that page, which solved most of the problem. Then I changed all width to min-width, which made some of the fields too big. Finally I used min-width only on the captions and width on the rest. I suspect some of them can be removed, but it works, and finding out which are superfluous is not high on my to-do list.

With min-width and min-height on all of the captions, IE still wraps longer captions onto two lines, as in "Company<br>Name:" even though min-width is plenty wide to accommodate it. FF knows "Company Name:" fits in min-width with plenty of room to spare, so it does it in one line.

I'd still like to know why changing to

.field_name{min-width:375px; min-height:16px;}

in my original example shows "Company<br>Name" on two lines in IE only when it fits in well under 375px, but again it's not high on my to-do list.

Thanks again.

[swa66]

min-width and min-height are not supported at all by IE6
There are a number of solutions but since you had something you linked already in IE6, the easiest is to just use a conditional comment.