qinglau
14 years agoMentor
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