Can't style submit button!

Hi,

Tis 23.45 on Boxing Day, I'm about ready to tear the remainder of my hair out and I'm wondering if anyone will take pity and save me from premature baldness?

Here goes.

I've installed ChronoForm successfully on localhost Joomla development site.

I've built the form I want to use and set up the email successfully.

The problems are as follows:

1) Submit button renders the same width as text boxes and I can't seem to change it without the boxes changing as well?

2) I can't apply any CSS to the button to render it in site style!

The hair is in mortal danger and the five hours I've spent googling to find an answer has taken me another step closer to divorce.

Can anyone offer constructive advice?

Must go before I find I'm sleeping in the dog basket tonight!!

Seasons Greetings,

CHRIS

Hi Chris,

Sorry it' spast midnight here - post the HTML (or a link to the form page) and I'll take a look in the morning. Or you could try adding style='width:40px;' into the input tag for the button - then change the 40 until you get what you want.

Bob

<input type="submit" name="submit" value="Submit Order" style='width:40px;' />

Hi Bob,

Thanks for the swift reply.

My response delayed by the somewhat pressing need to restore domestic harmony hence only back at the computer just now.

Now, where were we?

Ah yes.

I applied the suggestion you made but with only moderate success. Basically, it works perfectly when rendered in Firefox but renders at two-thirds the size in IE7, Opera, Safari, Crome etc! Any suggestion you might have in this respect most gratefully received.

In resect to styling all the other site wide buttons (read-on, login, registration, password reseend etc) function with the following CSS:

a.readon {
width: 82px;
color: #ffffff;
font-family: Verdana;
font-weight: normal;
font-size: 12px;
margin-top: 10px;
padding: 1px 5px 1px 14px;
display: block;
background: url(../images/grad1.gif) repeat-x top #333333;
text-decoration: none;
text-transform: none;

I'd like to apply this style to the form submit button but it steadfastly remains a system grey colour!

Should you have any thoughts on this they'd be most welcome.

Best,


CHRIS

Hi Chris,

I understand the need for domestic harmony!

Is the page on-line? Can I take a look?

Bob

Hi Bob,

It's on a LocalHost presently.

I'm running a MAMP Server, Joomla 1.5.8, and the template is a very heavily modified ja-purity (looks nothing like apart from Spotlight).

Does this help even a little vaguely?

CHRIS

No, we need to check the page in Firebug, a dev tool which gives more ideas about CSS problems!

Regards
Max

Hi Max,

Have whipped the site online for a while then you can take a peek and advise accordingly reference how to change size and style of the submit button.

URL is http://www.yatesconsulting.co.uk/index.php?option=com_chronocontact&Itemid=54

Any advice gratefully received.

CHRIS

Hi Chris,

It seems to style OK with CSS in the input. I'd probably give it an id and style it in the style sheet though.

Bob

Hi Bob,

What precisely did you change to get it to do that?

CHRIS

Hi Chris,

I didn't keep the exact code but something like

<input type="submit" value="Submit" name="undefined" style='width:80px; color:cyan; background-color:purple;' />

Bob

Bob/Max,

Thanks guys for your sterling support.

Now, humble apologies for being a total numpty, but a couple of other questions:

1) I'm trying to use a background image to style the button and not getting it right. I suspect this is syntax or some issue but I just can't see it.

Any ideas?

2) Button resize worked though in IE7 it won't position to the left (tis perfectly aligned in Firefox, Opera, Safari, Crome etc etc).

Any thoughts on this perchance?

All the best,

CHRIS

Hi Chris,

Don't know about the positioning. Try putting style='text-align:left;' into the input or the parent div.

I think the image should be background-image:url(/images/grad1.gif); with no quotes . . . but that image doesn't seem to exist on the server.

Bob

For anyone else trying to create an image submit button here's the styling I use for mine.

CSS

input.contact {
background:transparent url(../images/light/green_button.gif) no-repeat scroll left top;
border:0 solid;
color:#FFFFFF;
font-size:18px;
height:39px;
line-height:34px;
padding-bottom:6px;
text-align:center;
width:159px;
}

HTML

<input type="submit" name="undefined" value="Contact Me" class="contact"/>

You can view it in action at http://www.jessekanclerz.com/contact.html