can I shrink wrap a button without using float so will display inline?

[jacksondorado]

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?

Here's the HTML:
[highlight]
<a class="button" href="#"><span>Update Profile</span></a>
[/highlight]
Here's the css:
[highlight]
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;
}
[/highlight]

 

[cLFlaVA]

display:block is causing it to be 100% width, non-wrapping. i feel though that if you remove that, your layout will break.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

What is wrong with floating? Most buttons that use these techniques are floated. Why can't yours be?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jacksondorado]

I don'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.

 

[j4606]

You can try display:inline-block but i think it only works on block elements and only for ie so you may have to use a div. Also you can use -moz-inline-box since inline-block was not supported by moz last time i checked. I think it might, check

http://developer.mozilla.org/en/docs/Mozilla_CSS_support_chart

"inline block causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element." from w3.org

here is also a usefull link to css reference

http://xhtml.com/en/css/reference/display/

 

[jacksondorado]

Here is a test showing the top padding difference between IE7 and Firefox. If there is a solution to making them match, then this css would work for my needs.

http://www.teklectic.com/buttons/