CSS - Images And Link In Css

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

I'm having some problems getting rid of the border which appears around an image when you turn it to a link.

What I'm after happening is like on this forum, where it says new topic there's no blue border around it. I've looked at the source but can't figure out the bit that controls it, so if anyone could help it would be great.

To emphasis a link I put a small image (its an "X") before the link. See attached picture.

GOOD
this works well for text links:
Code:

<a href="...">text</a> --->  X text

BAD
I integrate a picture and define the picture as link
Code:

<a href="..."><img src="..."></a> ---> X <image>

How can I avoid to show the X in front of the picture?

Here is my CSS code:
Code:

#content a {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;}
#content a:hover {
text-decoration: underline;}

Something like this does not solve the problem
Code:

01 #content img a { background-image: none; }
02 #content img>a { background-image: none; }

Any idea is greatly apreaciated.
Thanks.

I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out.

HTML:

<a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a>
<a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a>

CSS:

a.more-info:link {
display:block;
overflow:hidden;
text-indent:-9999px;
width:156px;
height:79px;
background:url(../images/more-info2.png) no-repeat 0 0;
margin:6px 0 0 3px;
}

a.more-info:hover{
background-position: -156px;
}

a.community:link{
display:block;
overflow:hidden;
text-indent:-9999px;
width:154px;
height:72px;
background:url(../images/community.png) no-repeat 0 0;
margin:6px 0 0 3px;
}

a.community:hover{
background-position:-154px;
}

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks