Text on the Button with space in between disappears in IE

Question

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>

Answer 1

IE doesn't render "empty" table cells. Put   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.