Float and Clear Bug in IE

Discussion in 'CSS' started by Albion, Aug 1, 2006.

0
  1. #1
    Hello guys,
    Could you please help me out? I singled out this bug after a lot of debugging. The problem is that with IE, if i use a DIV with the clear atribute, and floating, it doesn´t generate the same output as with Firefox.

    Here is the code:

    <style type="text/css" media="all">
    #Layer1 {
    width:57px;
    height:25px;
    float: right;
    }
    #Layer2 {
    width:61px;
    height:28px;
    float: left;
    clear: right;
    }
    </style>
    <body>
    <div id="Layer1"></div>
    <div id="Layer2"></div>
    </body>

    The two layers should appear on each side of the screen but on a different "row". Layer2 should appear, as in FF does, a bit under the line where Layer1 is, since such is the specs for the clear attribute.
    While this works in FF, it doesn´t in IE.

    I´ve seen this is a reported bug, but i couldn´t find any workaround for this. Can anyone give me a hand?

    Thx in advance,
    Albion
     
    Albion, Aug 1, 2006 IP
  2. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well that's strange. That's how I do it when I WANT things to be on the same row.
     
    safe_reader, Aug 1, 2006 IP
  3. Albion

    Albion Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well, if you wanted it to be in the same row, you should not include the "clear:right" statement in one of the divs. That way both IE and FF (and presumably the rest browsers too) would display both layers in the same row.

    The problem is... if the "clear:right" statement is present, why does IE ignore it? How could i fix this?

    Regards,
    Albion
     
    Albion, Aug 2, 2006 IP
  4. Albion

    Albion Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Solved it !!
    Apparently, if you don´t float left the layer that has to go to the left, IE doesn´t confuse itself. In fact, the float:left is kinda redundant if you think about it, so i guess MS ppl didn´t think of this situation, hence the bug.

    I post this cuz i´ve seen lots of forums where this problem gets exposed, and nobody answered.

    Hope this helps some1!

    Regards,
    Albion
     
    Albion, Aug 2, 2006 IP