Monday, February 21, 2011

Text on the Button with space in between disappears in IE

I have some 6 buttons to be displayed in the toolbar and the buttons have to be displayed in such a fashion that there is a grouping i.e 3 buttons followed by a bit of space and then again another 3 buttons. I am using JSF as the UI framework.

The issue lies when my last button in the 1st group has text with space in between has to be displayed ie "Click Here", Only Click gets displayed

Actually i m using table html tag to group the set of buttons

<table>
    <tr>
        <td>
            <%-- 1st 3 buttons --%>
            <%-- the last button here has the text "Click here", But only Click is displayed in UI --%>
       </td>
       <td></td>
       <td></td>
       <%-- This is used to get the gap between group of buttons and this is what is causing the issue --%>
       <td>
           <%-- Another 3 buttons --%>
       </td>
    </tr>
</table>

Code for one of the Button (all others are rendered similarly)

<hx:jspPanel id="b1" rendered="true">
    <p:outputButtonLink id="b11" rendered="true"  
        value="Click Here"
        iconSrc="../../images/click1.gif"
        href="#" onclick="return Show();">
    </p:outputButtonLink>
</hx:jspPanel>
From stackoverflow
  • IE doesn't render "empty" table cells. Put &nbsp; in them to make IE to render them.

    <td>&nbsp;</td>
    

    That said, I strongly recommend you to learn a bit more about CSS. This is an easy fix with margin.

    Arun : Thanks for ur response balu, but tat dint work. I have figured out that having the table itself to group the buttons is causing the issue.
    Arun : Thank you very much , I was able to fix it by setting the css property width:100% for td

0 comments:

Post a Comment