Icons problem

Icons problem


Hi,
I can't make jQueryUI icons work. Every time an icon creates two
additional line breaks (both in FF and IE), and I can't achieve the
same effect as on jqueryui.com website.
I simply copied the code to create a button from their themeroller
page, but it doesn't seem to work:
<a href="#" class="ui-state-default ui-corner-all"><span class="ui-
icon ui-icon-newwin"></span>Open Dialog</a>
And this button looks nothing near like on their website.
What is wrong?
Below is an HTML page to reproduce the problem (basically copied and
pasted from jqueryui.com). Actually <script> tags linking to .js files
can be omitted.
===========================
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css"
media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/
jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>

<a href="#" class="ui-state-default ui-corner-all"><span class="ui-
icon ui-icon-newwin"></span>Open Dialog</a>


</body>
</html>