Текст на кнопке с пробелом между ними исчезает в IE

Question

У меня есть около 6 кнопок, которые должны отображаться на панели инструментов, и кнопки должны отображаться таким образом, чтобы была группировка, т.е. 3 кнопки, затем немного свободного места, а затем еще 3 кнопки. Я использую JSF в качестве структуры пользовательского интерфейса.

Проблема заключается в том, что моя последняя кнопка в 1-й группе имеет текст с пробелом между ними, то есть «Click Here», отображается только Click

На самом деле я использую тег HTML таблицы для группировки набора кнопок

<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>

Код для одной кнопки (все остальные отображаются аналогично)

<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 не отображает "пустые" ячейки таблицы. Поместите   в них, чтобы IE отображал их.

<td>&nbsp;</td>

Тем не менее, я настоятельно рекомендую вам узнать немного больше о CSS . Это легко исправить с margin.