I'm having a shopping cart installed and want my shopping cart buttons to look like these buttons:

http://www.jpwear.com/testbutton.html

These buttons are not images but rather HTML buttons.

But see the button that says "Continue Shopping"... that button is way too long and taking up way to much space because it's simply too long. I don't like that big gap on both sides of the text. That button could be much shorter.

Both of these buttons in my opinion are way too long. I don't like that big gap on both sides of the text on either button. Both buttons could be shorter. Does anyone know how I can specify to make them shorter?

P.S- This I'm very curious about... how come the button that says "Continue Shopping" has a much bigger gap on both sides of the text than the button that says "Update Cart"??? They both have the EXACT SAME coding... so you would think they would both have the same width of gap on each side of the text. Anybody know? I thought that was strange... that just doesn't look attractive to me. It's not an even placement of text.

Sorry, I know I'm picky =)

I just noticed a weird issue with HTML buttons, it places a question mark "?" at the end the of URL you are linking to. I just read about that problem here:

http://www.htmlgoodies.com/tutorials/buttons/article.php/3478871

I also tested it out on my site at:
http://www.jpwear.com/testbutton1.html

No matter if you put the slash "/" at the end it still adds a question mark to the end of the URL you are linking to. How can I get rid of that question mark?

I think I'm getting annoyed with HTML buttons... maybe I should just make an image button that looks like an HTML button since I like how they look...

Edit: I just added one more button to: http://www.jpwear.com/testbutton1.html ... the last button uses javacsript.. I guess the only way to get rid of the question mark was with that javascript code. That last button finally doesn't add a question mark.

But does anyone know how to change the width of these HTML buttons? :(

And I hope that since I used javascript coding on this HTML button that it will still work for everybody... that won't cause ANY browser compatibility problems will it?

:confused:

You can change the style of buttons using CSS, or alternatively use image based buttons...

put in
style="width: 50px"
and adjust accordingly

Thanks for the responce. I've looked it up online but still do not know how to do it... I will research further... I don't know how to edit the size of those HTML buttons in CSS.

But since I have javascript coding in that button... I heard sometimes IE doesn't read javascript correctly so do you think using these HTML buttons is safe or a good idea?

post your code and lets take a look

Zoombie,

Thanks I tried it and it did shorten the button but 50px was way too short and chopped half the text off of the button so I made it 135px instead.

It did shorten the button but unfortunately this isn't going to work because when you shorten the HTML button it makes the text move off center. You can view it in the below link... the very last button on the botton and you'll see what I mean:

http://www.jpwear.com/testbutton1.html

I'm sarting to think maybe I should just use an image button. I really like how the HTML button looks though... maybe I can take a screenshot of the HTML button and turn it into an image...I justhate that big gap on the sides of the text in HTML buttons... it takes too much room because the buttons are unnecessarly to long :(

Edit: sorry neverind,I had an error in my code. Changing the px width worked! :)

You can see the last bottom is now shorter. Thanks very much for the help. That fixed it.

Just one last issue, do you think it's safe to use javascript HTML buttons like this? I mean it's compatible with everybody and every browser so I should be ok using these buttons?

Thanks,

P.S- What's the correct way to write the code...

style="width :135px"
style="width:135px"

The first one or the second one? They both work but which ones correct?

Thanks, for the help :)

a lot of coders use
style="width: 135px"
make sure you check your results in firefox and ie