1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE6 Floating Bug & IE6 Clearing Bug

Discussion in 'CSS' started by rochow, Nov 21, 2008.

  1. #1
    [​IMG]

    Clearing Bug
    Instead of aligning with the cleared element, IE ignores it.

    Only solution I've come up with is re-structuring the HTML a bit.

    [​IMG]

    Floating Bug
    When some elements are floated right, IE doesn't wrap the content as floats should - instead, it make the element 100% width. Haslayout doesn't seem to solve the issue.

    Only solution I've come up with is to set a width on the element (which isn't ideal)

    Anyone know what these bugs are called, and good solutions to them?
     
    rochow, Nov 21, 2008 IP
    Silver89 likes this.
  2. baskaran_ramasamy

    baskaran_ramasamy Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i too have compatibility problems in IE and Firefox ... Can anyone know about solution for clearing and floating bug! thanks in advance!
     
    baskaran_ramasamy, Nov 22, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Rochow: what you are seeing is IE's normal behaviour-- letting things ride up alongside a float.

    I ran into this with definition lists. Paul mentioned it in the CSS sticky (um, I think the "tricks and tips" one) and then the Search This link he links to talks a bit about them. The discussion starts here and the article page is here.

    Setting the last box to display: block would stop if from riding up, but then the rest of your layout is screwed.

    There is a second bug here: IE doesn't let floats in the same direct clear other floats. This is also discussed in that thread.

    I'd say, build it the way you need for the normal browsers, and for IE, use conditional comments to use other HTML code-- you could maybe add an element or something that's not floating for clearing and maybe set a top margin on that third box just for IE to push that thing down. It's ugly, however I wouldn't want a screwed up page with IE8 on the horizon when all the other browsers can deal with this fine.
     
    Stomme poes, Nov 22, 2008 IP
  4. kk5st

    kk5st Well-Known Member

    Messages:
    2,993
    Likes Received:
    222
    Best Answers:
    11
    Trophy Points:
    190
    #4
    Hi, Rochow. Did I miss it, or did you not post a link?

    I've not seen this issue, as you describe it, and would like to see it in action.

    cheers,

    gary
     
    kk5st, Nov 22, 2008 IP
  5. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #5
    I've encountered the same problem with definition lists too. Also if I have label -> input, label -> input using float left and clear:both on the label, instead of the inputs coming down with their label, they just all sit up the top.

    I haven't posted one as the projects I've encountered this on are all NDA. I will however make a demo... will be easier to find a solution if there is something to play with.

    Examples:

    Right Float
    www.matthewrochow.com/ie/right-float/

    Not Clearing
    www.matthewrochow.com/ie/not-clearing/
     
    rochow, Nov 22, 2008 IP
  6. kk5st

    kk5st Well-Known Member

    Messages:
    2,993
    Likes Received:
    222
    Best Answers:
    11
    Trophy Points:
    190
    #6
    In the 'not-clearing' example, what's all the space to the right of #main? Why aren't #about and #contact children of #main? That would establish a sane styling context and eliminate the problem.

    You do need to cause #page to enclose its float children. It has Layout, which takes care of IE, but not modern browsers.

    On the other, just feed IE6 a width for the form.

    As a debugging note for minimal test cases such as these, you will be helping your collaborators were you to embed the styles in the head section.

    cheers,

    gary
     
    kk5st, Nov 22, 2008 IP
  7. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #7
    This is the wireframe part of a design that is from another design. The empty space on the right is where other content (floated right) is. Main, about and contact are unrelated (random names I selected).

    Those elements have to be like that visually. Without wrapping an unsemantic div around the left side with a width on it so I don't have to float and clear them, I can't find a solution.

    I know - quick mockup, so I haven't made #page wrap.

    The same "logic" can be placed in a variety of situations. Basically, you have a float, another floated underneath that's cleared, and then another float which should stay inline with the cleared one (however in IE6 it doesn't).

    That is my current solution regarding the form, however surely there is a better way. For instance if that was a slogan, it may change from time to time, so the width in the CSS would have to be changed also.
     
    rochow, Nov 22, 2008 IP
  8. kk5st

    kk5st Well-Known Member

    Messages:
    2,993
    Likes Received:
    222
    Best Answers:
    11
    Trophy Points:
    190
    #8
    The div element is not about semantics, it's a structural aggregator. All those elements are in the same column, therefore the same structural context.

    cheers,

    gary
     
    kk5st, Nov 23, 2008 IP
  9. kk5st

    kk5st Well-Known Member

    Messages:
    2,993
    Likes Received:
    222
    Best Answers:
    11
    Trophy Points:
    190
    #9
    re: the form.

    There's just not much you can do with IE6; it's a crappy browser, and needs help.

    Even going the long way 'round, IE6 needs an explicit width.
    <style type="text/css">
      #page {
        border: 1px solid black;
        margin: 25px auto;
        text-align: right;
        width: 700px;
        }
    
      h1 {
        text-align: left;
        float: left;
        width: 50%;
        }
    
      form {
        background-color: red;
        display: inline-block;
        text-align: left;
        vertical-align: bottom;
        }
    
      fieldset {
        border: none;
        }
    
      legend {
        display: none;
        }
    
      </style>
    
    <!--[if lte ie 7]>
    <style type="text/css">
    form {
      display: inline;
      }
    
    * html form {
      width: 300px;
      }
    </style>
    <![endif]-->
    =====================
      <div id="page">
        <h1>Test Div</h1>
    
        <form action="#"
              method="get">
          <fieldset>
            <legend><!----></legend> 
            <label for="keyword">search</label>
            <br />
            <input type="text"
                      name="keyword"
                      id="keyword" /><input type="submit"
                      value="search" />
          </fieldset>
        </form>
      </div>
    Code (markup):
    cheers,

    gary
     
    kk5st, Nov 23, 2008 IP
  10. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #10
    I think the same bug affects positioning too - not just floating. Floated left is fine, float it right and it goes 100% width.
     
    rochow, Nov 23, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Hmmm, the floats not clearing floats I have going on even in IE7 here though in this case I can live with it (and actually, I think it looks better in IE here than in FF et al). (see blue-backgrounded headers, not the dl's inside (though they also had the issue, but IE gets no-floats on the dd's)

    Re forms that have two "rows" I also try to use width of the form itself to force wrapping, but sometimes IE6 will expand the box. I've been stopped in my tracks from doing this because of this weird issue I have with FF on Ubuntu/Gnome (talking with Doc it's occurred to me that this might be a Gnome issue), but often it will do the job in forcing rows-- sometimes then you don't even need the clear, depending.
     
    Stomme poes, Nov 25, 2008 IP