Controlling Button Appearance

[keyplyr]

After completing my PHP Shopping Cart utility, I am unhappy with the wide diversity of how the buttons appear, depending on browser/OS.

Netscape, Opera, Mozilla et al, all have different looks/sizes to the buttons not to mention IE6/winME is different from IE6/winXP.

Can CSS offer some means of controlling the look of the buttons cross browser?

Thanks

[Pricey]

Are you talking about input buttons?

If so... check here: [webmasterworld.com...]

[BlobFisk]

Not totally cross browser, unfortunately, keyplyr.

IE (5+) will respect all input restyling, but NN4.x won't. Also, Netscape 6 will use it's default button styles, rather than those specified in your CSS.

It's worth doing some testing to see which browsers adhere to your styling.

[keyplyr]

Thanks,

I'm not able to get bold text on the input button. Is this not possible?

This is what I'm using:

.button {
background-color:#699;
color:#fff;
font:bold 11px; verdana, arial, sans-serif;
text-decoration: none;
}

[BlobFisk]

Hey,

The font shorthand specification is:

<font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>

Also, you have a semi-colon after the 11px in your font call.

HTH

[keyplyr]

Thanks BlobFisk,

That typo was stopping it from working.

[keyplyr]

Also, can the width be controlled? I have three imput buttons (containing text) across the page. I have put them in table cells but they force the width beyond the table dimensions.

CSS

input.grn {
background:#699;
color:#000;
font:12px verdana, arial, sans-serif;
border:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
}

HTML

<table width="600" border="0" cellpadding="0" cellspacing="9" align="center"><tr>

<td width="175" valign="top">
<form action="/my_page.html" method="get">
<input type="submit" value="Ceck Out" class="grn"></form></td>

<td width="200" valign="top">
<form action="https://my_domain.php" method="get">
<input type="hidden" name="sessid" value="<?php echo $mysessid?>">
<input type="submit" value="More Check Out Stuff" class="grn">
</form></td>

<td width="225" valign="top">
<form action="my_page.php" method="get">
<input type="submit" value="Lots More Check Out Stuff" class="grn">
</form></td></tr>
</table>

Extra space is being added on each side of the text within the input buttons. This is what I'd like to remove.

[BlobFisk]

The width can be controlled using width:, but if the text in the button is longer than the specified width, then the button will stretch to accommodate the text.

[keyplyr]

Hmmm... I had replied saying that I solved the issue using inline style="width:150px;"

- Some of the posts have vanished -