Consiglio su come gestire pulsanti di questo tipo...

[goat]

Agevolo ausilio visivo:



Come potete vedere la larghezza del pulsante varierà in base alla scritta al suo interno.
Inoltre questi pulsanti non fungeranno da menù (sarebbe bastata una lista in linea), ma saranno disseminati per le varie sezioni in posizioni sempre differenti.
Una mezza idea di come gestirli tutti utilizzando meno codice possibile l'avrei, ma un paio di opinioni in più mi farebbero davvero comodo.
Grazie,
goat

[fcaldera]

Originariamente inviato da goat
Agevolo ausilio visivo:



Come potete vedere la larghezza del pulsante varierà in base alla scritta al suo interno.
Inoltre questi pulsanti non fungeranno da menù (sarebbe bastata una lista in linea), ma saranno disseminati per le varie sezioni in posizioni sempre differenti.
Una mezza idea di come gestirli tutti utilizzando meno codice possibile l'avrei, ma un paio di opinioni in più mi farebbero davvero comodo.
Grazie,
goat

<button type="submit">
Inoltra
</button>

all'elemento button dai come sfondo la parte sinistra del pulsante (larga pochi px)
all'elemento strong dai come sfondo la parte destra larga 3-400px e ancorata a destra

[goat]

Ho seguito il tuo consiglio e la cosa sembrerebbe funzionare, solo che IE e FF mi visualizzano il tag <button> male.
Ho preparato anche il file d'esempio, con il CSS nel codice sorgente: ecco.
Il verde che si vede è il colore di background del tag <button>.
goat

[fcaldera]

potresti mettere in position relative lo strong e spostarlo verso l'alto e verso sinistra

ma forse è più facile cambiare il markup così

<button type="submit">
<span>Inoltra</span>
</button>

ed applicare gli sfondi allo strong ed allo span

[goat]

Scusate se insisto ma la cosa mi sta prendendo male.

Ho messo online un altro esempio: ecco.

Questo il CSS:

a, button, span {
    position:relative;
    height:26px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    line-height:26px;
    text-transform:uppercase;
    text-decoration:none;
    color:#333333;
    float:left;
    }
a {
    padding:0px;
    background-color:#FFFF00;
    }
button {
    margin:0px;
    padding:0px;
    border:none;
    background-color:#00FF00;
    cursor:pointer;
    }
span {
    background:url(bg_sx.gif) left top no-repeat;
    } 

E questo l'HTML:

[url="#null"]<span>testocortointaga</span>[/url]





<button type="submit"><span>testolungointagbutton</span></button> 

Il codice è semplicissimo, eppure mi dà un'errata visualizzazione del <button> sia su IE che FF.
E come se le dimensioni e i margini del tag <button> fossero ingestibili.
Qualche idea?
goat

[goat]

Risolta la questione!
Il codice che ho usato è il seguente:

a, button, span, p {
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
    color:#ffffff;
    float:left;
    cursor:pointer;
    }
a {
    height:26px;
    padding:0px;
    background:url(bg_dx.gif) right top no-repeat;
    }
button {
    width:auto;
    height:26px;
    margin:0px;
    padding:0px 6px 0px 0px;
    border:none;
    overflow:visible;
    background:url(bg_dx.gif) right top no-repeat;
    }
span, p {
    margin:0px;
    padding:0px 6px;
    line-height:27px;
    background:url(bg_sx.gif) left top no-repeat;
    } 

[url="#null"]<span>testo corto in tag a</span>[/url]







<button type="submit" />testo lungo in tag button</button></p>