Niceforms throw me ugly elements

Niceforms throw me ugly elements

I used NiceForms in my project intend to save my time on form's designing.
but when I applied the theme on my form, everything got changed. below is
the screenshot:
there are gray lines between button left and right, as well as text input
left and right. I have tested my page in firefox, chrome , IE 8, and found
that in firefox, the left side and the right side of the button and input
text are missing, in chrome and ie8, they are shown as above image.
here is my test html code:
<link href="Scripts/niceForms/niceforms-default.css" rel="stylesheet"
type="text/css" />
<script src="Scripts/niceForms/niceforms.js" type="text/javascript"></script>
<fieldset>
<legend>temperature functionality with jquery </legend>
<dl>
<dd><input type="button" id="Button2" value="Current Temperature" />
<input id="Text1" type="text" value="300" />
<div
style="width:109px;height:394px;background:url('Images/ThermometerMain.png')
no-repeat;position:relative; text-align:center">
<div id="temp"
style="width:10px;height:0px;margin-bottom:35px;background-color:Green;bottom:0;position:absolute;margin-left:52px;background:url('Images/ThermometerStep.png')
repeat-y;font-size:7pt;"></div>
</div>
</dd></dl>
</fieldset>
Any one can help me ? thx.