views:

128

answers:

2

I have a style that wraps around an input button, so the button can be styled very creatively. When the button is hidden in .Net, i would like the style to collapse so it renders like its hidden as well. What the style does, as a result of no value in the button or its hidden, is it keeps a small shape.

Click to see a demo: http://media.apus.edu/it/evan-testing/button.htm

<style>
.button {
    cursor:pointer;
    text-decoration:none;
    background:url(button_bg.gif) no-repeat right top; 
    padding-right:10px;
    display:inline-block;
    line-height:29px;
    height:29px;
    font-size:12px;
    color:#FFFFFF;
    font-weight:bold;
}

span.button {
    vertical-align: middle;
}

.button span { 
    background:url(button_bg.gif) no-repeat left top;
    padding-left:10px;
    line-height:20px;
    height:29px;
    display:inline-block;
}

.button span span {
    background:transparent;
    padding:0;
    font-size:12px;
}

.button span input {
    cursor:pointer;
    font-weight:bold;
    background:transparent;
    border:0;
    padding-top:.4em;
    font-size:12px;
    font-family:verdana;
    color:#FFFFFF;
}

.button:hover {
    background-position:right -39px;
}

.button:hover span {
    background-position:left -39px;
}

.button:active {
  background-position:right -78px;
}

.button:active span {
  background-position:left -78px;
}
</style>

Input button wrapped in a span with no value: 
<span class="button"><span><input type="button" value=""></span></span>

<P>

Input button wrapped in a span with a value: 
<span class="button"><span><input type="button" value="test"></span></span>

<P>

Span with no data value: 
<span class="button"><span></span>
A: 

Unfortunately there is no way to style an element depending on it's content.

How about styling the <button> element instead:

<button><span><span>Test</span></span></button>
RoToRa
I guess what I'm looking for is to get the sides of the span to shrink/collapse when there's no data between the spans and only when there's data within the span to stretch it to the appropriate size. As seen in my demo, the second example shows a style still: http://media.apus.edu/it/evan-testing/button.htm
Evan
A: 

this guy has a better solution than mine. i don't have to use "button" after all, which is what i see everyone claiming is required to style a form button. i can still use "input", which is required for .net, and when the button is hidden the style will disappear appropriately.

See Demo: http://fortysevenmedia.com/tuts/cssbuttons/

Evan