Question

I am building a html menu and I am using jQuery UI to format the buttons. I want to create an icon only button. Everything works fine for IE 9, Chrome and Safari on Windows 7. It also works for Chrome on OS X but not Safari on OS X.

There is an interaction with a Google map that I have on the page. If I do not create the map the menu will render correctly with the icon only button. But if I create the map the menu disappears.

The failure occurs when I set the buttons text property to false. I have tried to do this 2 ways

(1)

$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' }, text: false });

(2)

$("#zoomIn").button({ icons: { primary: 'ui-icon-zoomin' } });
$("#zoomIn").button("option", "text", false);

If I dont set this property the menu display correctly but there is text in the button.

The HTML for the button is

<button id="zoomIn">xxx</button>

I’m including the following files (these are from the jQuery UI demo page)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 

I have tried including local copies the jQuery libraries.

I’m baffled by this one. Hopefully someone else has run into this problem and solved it. Any help is much appreciated.

Answer 1

Finally tracked down the issue.

I am using a jQuery UI stylesheet, in which there is a style

.ui-button-icon-only .ui-button-text, .ui-button-icons-only 
.ui-button-text { padding: .4em; text-indent: -9999999px; }

setting text-indent to -999px; resolves the issue.