CSS - Css Link With Images

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;
}

Well I have images that I am using as link:

Code:

<dl class="links">
<dt><a href="index.html"><img class="border"  src="images/home.gif" alt ="home" /></a></dt>
<dt><a href="aboutme.html"><img class="border" src="images/aboutme.gif" alt ="About Me" /></a></dt>
<dt><a href="blog.html"><img class="border" src="images/blog.gif" alt ="Blog" /></a></dt>
<dt><a href="guestbook.html"><img class="border" src="images/guestbook.gif" alt ="Guestbook" /></a></dt>
<dt><a href="tutorial.html"><img class="border" src="images/webtutorial.gif" alt ="Web Tutorial" /></a></dt>
</dl>

What I am trying to do is get this into the CSS of my page as I want to make multiple skins for the page. But I am at a loss of how to get the image name of the link into it, so that in different style sheets I can use different pictures.

Please Help,

Bumfluff

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