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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Marek Mänd
    #1

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

    I have simple structure like:

    <div>
    <h3 style="text-align:center;">
    <span style="float:ri ght;">input type="image"/></span>
    <span style="float:le ft;">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/uuringuvastused-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)....?
    Tags: None
    • Marek Mänd
      #2
      Re: IE6 doesnt extend the DIV box height so that float would beenclosed visually by DIV

      Marek Mänd wrote:[color=blue]
      > I use <br> element as clearer. However if I use <div> element as clearer
      > then the H3 text dissapears at all in MSIE6.[/color]

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

        Comment

        • DU
          #3
          Re: IE6 doesnt extend the DIV box height so that float would beenclosed visually by DIV

          Marek Mänd wrote:[color=blue]
          > I have simple structure like:
          >
          > <div>
          > <h3 style="text-align:center;">
          > <span style="float:ri ght;">input type="image"/></span>[/color]

          Starting "<" missing; no src attribute specification defined for the
          input type="image" and it is mandatory.
          [color=blue]
          > <span style="float:le ft;">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.[/color]

          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[color=blue]
          > 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
          >
          >[/color]

          Definitively not a reduced testcase.
          [color=blue]
          > 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),[/color]

          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[color=blue]
          > 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)....?[/color]

          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 :)

            Comment

            Previous template Next
            Working...