Icons not displaying right.

Icons not displaying right.


I'm trying to use icons on buttons (anchors) with text, but every time
i do they end up about 70 pixels to the left (way off the button) as
well as the button being 2 lines for some reason. I've used firebug to
isolate out the offending CSS property. If i remove the
"display:block" property from ".ui-icon" the two lines goes away, but
the icon goes away (duh, so that's a no go) I've tried some forced
fixes that "work" but of course applying the globally will not be an
option.
I can not find ANY documentation that tells you how to properly apply
an icon (or any styling) to an anchor or button, and i cant find any
relevant discussion on here. yet, obviously it works. So how did you
all do it? can someone please provide a basic tutorial on skinning
anchor links and buttons? (including background, rounded corners, and
icons (the whole #!) )
on request, I can provide screen caps of my issue to better illustrate
my issues.
i am on firefox 3 and testing in safari 3 and 4b.
i have not applied any style based jQuery (just click event handlers)
so if i have to do something on the JS side to style...i haven't done
that.