views:

224

answers:

1

I've been trying to setup a very simple example using jQuery themes. I haven't been able to get it to work. I want to use the same themes to format some links and buttons so that they blend in when I bring dialogs and others. So far I have this very simple example which does not render correctly:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/base/ui.base.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/sunny/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
    <title>jQuery Themes</title>
  </head>
  <body>
    <button type="button" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</button> 
    <a href="#" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Submit</a>
  </body>
</html>

I'm using the sunny theme and the rendering produces different fonts for the button and the link. An extra vertical line shows at the right of the button and the icon on the link does not even show inside the box. Don't know what I'm missing.

The hover changes that usually appear over buttons don't work either.

+1  A: 

Getting buttons and links to style the same on various different platforms is difficult, perhaps, impossible unless you're willing to live with "close, but not quite." My strategy is to use javascript to replace buttons with links that perform the button action via javascript, in addition to getting "close, but not quite" with CSS. Check out this article from the Filament Group for ideas on how to do this with jQuery. Once you have "close, but not quite" done in as many browsers as possible, then add the javascript to replace the buttons with links and get completely consistent styling for people who have javascript enabled.

tvanfosson
I was going through the jQuery css framework and presumably they made these classes to try and make all the styling look similar. Perhaps it doesn't work...
rmarimon
I haven't had a chance to look at jQuery UI 1.8 (yet). I think they based a lot of what they did on the Filament Group's work.
tvanfosson