Forum Discussion

qinglau's avatar
qinglau
Mentor
15 years ago

IE7 Div width bug in Kudo section

I ran into a very strange bug with IE7. Here is my HTML structure

<div id="tt_message_kudos_top">
<div id="tt_kudo_position">
    <span> Kudos </span>
</div>
<div id="TT_kudos_reply">
    <div class="lia-message-actions lia-component-actions">

        <div class="lia-button-group">

            <span class="lia-button-wrapper lia-button-wrapper-secondary"><a href="/t5/forums/replypage/board-id/Services/message-id/1" id="link_35" class="lia-button lia-button-secondary reply-action-link lia-action-reply">Reply</a></span>    

        </div>
    </div>
</div>

 The main CSS code to control these div are:

 

#tt_message_kudos_top {
    float: right;
}
#tt_kudo_position {
    float: left;
}
#TT_kudos_reply {
    float: left;
}

 

The page looks fine in firefox, chrome, IE8,9. However, the TT_kudos_reply div automatically expand width space and float to right edge of this div. I tried to give a fix width in TT_kudos_reply will solve the problem, However, the content of the TT_kudos_reply is dynamically change. See screenshots. I also try to apply lia-button-wrapper, display:inline, also tried to clear the float of reply. I thought this should force it;s siblings to the next line.

 

#TT_kudos_reply { clear:right; float: left; }

 

it won't affect. Any suggestions? Thanks.

 

Cheers,

 

Qing


9-22-2011 2-04-44 PM.png9-22-2011 2-05-10 PM.png

1 Reply

  • cblown's avatar
    cblown
    Boss
    15 years ago

    I'd suggest setting up a conditional CSS sheet for IE7 and provide the element with a width. In IE7 width will behave like min-width, so even if the containing content expands the outer parent should grow.

     

    IE7 is very poor at determing the dimensions of items that involve floating.

     

    HTH

    Chris