HTML button that automatically resize based on text without tables

Question

<table align="center" cellpadding="0" cellspacing="0" border="0" height="32px">
    <tr>
        <td>
            <img src="http://img203.imageshack.us/img203/8052/lefto.png" border="0" />
        </td>
        <td style="background:url(http://img24.imageshack.us/img24/2825/centervw.png); background-repeat: repeat-x; color:#FFFFFF;">
            Press Me Press Me Press Me Press Me Press Me Press Me Press Me Press Me Press Me
        </td>
        <td>
            <img src="http://img23.imageshack.us/img23/4676/rightk.png" />
        </td>
    </tr>
</table>

I have nice button that auto re-sizes based on length of text in middle table column try it here http://jsfiddle.net/QaFTc/2/

What i need is to do same without using tables and centered.

I tried and i either get not centered or i have to specify the width of button.

I am not sure exactly what you need. If you need just a button you could use tags or if you need to submit a form. You can then style it with CSS. — intelis, Oct 09 '12 at 19:34
I need button like for the navigation menu that looks better than the and i need it to be not image but text. so i can edit it without photoshop for this i need it to auto size background of the text to the length of the text as i shown on the link did you click link? — John Smith, Oct 09 '12 at 20:03

score 0 · Accepted Answer · answered Oct 09 '12 at 19:34

0

This is what i got: http://jsfiddle.net/nqGX8/

No tables, divs only. You can use images instead of the colors.

answered Oct 09 '12 at 19:34

circusdei

1,907
12
27

First time i hear about button tag, again i need it centered. – John Smith Oct 09 '12 at 20:04
The text centered? Or the button centered in it's parent? – circusdei Oct 09 '12 at 20:10
Wrapped with a div (display: inline-block), and text-align: center; on body. You can center it the same way you would do text, or even have it inline with text. http://jsfiddle.net/U5gCF/ – circusdei Oct 09 '12 at 20:15
gr8 i wanted to go with less tags, but guess there's no way around it. – John Smith Oct 09 '12 at 20:59
i have tried many different ways, and this has been the most consistent in display and functionality. – circusdei Oct 09 '12 at 21:01

Anoop · Answer 2 · 2012-10-09T20:06:41.890

0

I Added a button using button and span modified jsfiddle

edited Oct 09 '12 at 20:06

answered Oct 09 '12 at 19:41

Anoop

22,031
9
59
70

Now how do you center it as my link its in the center. – John Smith Oct 09 '12 at 20:03
I modified my jsfiddle http://jsfiddle.net/QaFTc/7/. I am using text-align center on button parent(moved button inside a div). – Anoop Oct 09 '12 at 20:08
Problems with button tag: "a potentially dangerous Request.Form value was detected", because IE6 submits the html inside of the button, which, in my case, has html tags in it." from http://stackoverflow.com/questions/1903453/what-disadvantages-are-there-to-the-button-tag-it-seems-there-are-quite-a-fe – circusdei Oct 09 '12 at 20:19

HTML button that automatically resize based on text without tables

2 Answers2