IE6 doesnt extend the DIV box height so that float would be enclosedvisually by DIV

[Marek Mänd]

I have simple structure like:

<div>
<h3 style="text-align:center;">
<span style="float:right;">input type="image"/></span>
<span style="float:left;">input type="image"/></span>
boxes titlebar
</h3>
<div>
box content
</div>
</div>

The problem is the INPUT type=image's with their surrounding span's,
that hang over the bottom border of the H3 in MSIE6. As H3 is visually
boxes titlebar, H3 should extend its height acordingly to fit its
contents height and there should be nothing hanging out the area of
titlebar.

I am clueless how to set clearer properly. My attempts till so far
failed in Microsoft Internet Explorer 6. The file is 3.5KB big, includes
stylesheet and is fully validated as XHTML1.0 strict.

http://marekmand.kuubik.ee/test/uuri...tused-form.htm
From the various CSS tutorials I have read that it is exactly the
internet explorer that treats FLOAT things wrong and MISTAKENLY EXTENDS
the container element (without even neading clearer), so the container
element visually fully closes the float. However this is exacly here the
*OPPOSITE* what most of the CSS tutorials preach.

I use <br> element as clearer. However if I use <div> element as clearer
then the H3 text dissapears at all in MSIE6.

How could i build then a titlebar with some buttons on the left and some
on the right on "boxes titlebar" without using tables for layouting (put
input immages in cells aswall a the titlebar text)....?

[Marek Mänd]

Marek Mänd wrote:

I use <br> element as clearer. However if I use <div> element as clearer
then the H3 text dissapears at all in MSIE6.

i used forecefully line-height set on H3 and it made the content to appear.

[DU]

Marek Mänd wrote:

I have simple structure like:

<div>
<h3 style="text-align:center;">
<span style="float:right;">input type="image"/></span>
Starting "<" missing; no src attribute specification defined for the
input type="image" and it is mandatory.
<span style="float:left;">input type="image"/></span>
boxes titlebar
</h3>
<div>
box content
</div>
</div>

The problem is the INPUT type=image's with their surrounding span's,
that hang over the bottom border of the H3 in MSIE6.
Have you thought of simply defining a css height declaration for the h3
element? It works for me with MSIE 6. No problem whatsoever.

As H3 is visually boxes titlebar, H3 should extend its height acordingly to fit its
contents height and there should be nothing hanging out the area of
titlebar.

I am clueless how to set clearer properly. My attempts till so far
failed in Microsoft Internet Explorer 6. The file is 3.5KB big, includes
stylesheet and is fully validated as XHTML1.0 strict.

http://marekmand.kuubik.ee/test/uuri...tused-form.htm


Definitively not a reduced testcase.
From the various CSS tutorials I have read that it is exactly the
internet explorer that treats FLOAT things wrong and MISTAKENLY EXTENDS
the container element (without even neading clearer),
I think you mean overflow: visible is not implemented in MSIE 6
according to the spec, which is true... MSIE 6 has a major bug regarding
overflow: visible.

so the container element visually fully closes the float. However this is exacly here the
*OPPOSITE* what most of the CSS tutorials preach.

I use <br> element as clearer. However if I use <div> element as clearer
then the H3 text dissapears at all in MSIE6.

How could i build then a titlebar with some buttons on the left and some
on the right on "boxes titlebar" without using tables for layouting (put
input immages in cells aswall a the titlebar text)....?

Just define a height for the h3 element according to the highest inline
element inside of it. That works appropriately.
Setting forecefully the line-height is not the same and is not my
recommendation.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)