masking submit button with a gif

systrum · 2006-01-13 12:36:52

I edited the comment_form to style my comments submit button by replacing

txp:comment_submit /

with

input type=“image” src=“http://url/submitButton.gif” name=“submit” value=“Submit” class=“button”

because of this i have found that IE (mac and windows) can`t post comments. other browsers are fine.

how should i edit this in order mask the submit button with a gif? is it possible?

systrum · 2006-01-14 22:36:52

nobody?

Neko · 2006-01-15 01:26:22

You could try the CSS way and either style the submit button tweaking background, border, fonts and padding or set a negative margin to the submit button and then replace it with the desired image, like in this example

I’ve tried it once and worked just fine, except for IE (darn IE!). Maybe you’ll be luckier than me. :3

systrum · 2006-01-15 09:16:04

thats my exact prob – users can’t post in IE

-P- · 2006-01-15 09:37:06

You have to define class with stylesheet

<code>
.button {
background: url(../myimage.gif);
}</code>

and then in your comment form make id with your button like this

Last edited by -P- (2006-01-15 10:16:44)

systrum · 2006-01-15 09:41:50

awesome, thanks

-P- · 2006-01-15 10:16:05

Glad I could help! :D

Mind submitting url for your buttons or is the site not ready yet?

systrum · 2006-01-15 10:40:08

actually still working on it

sorry, i know this is a really lame question but …
how should i accomodate <code><div id=“button”>
<txp:comment_preview /> <txp:comment_submit />
</div></code>

to work with

-P- · 2006-01-15 11:25:58

I don´t use any tables in my comments_form:

<code>
<label>message</label>
<txp:comment_message_input />
<div id=“button”>
<txp:comment_preview /> <txp:comment_submit />
</div >
</code>

nor have any installation at the moment with original comment_form so I could test it for you. So the rest of the answer would be only guessing. This is the method I use, don´t know if it is the best one.

I suggest that you download few ready themes for example from Stuart and look into their forms as a sample, how they have been done. That is a good way to learn :)

systrum · 2006-01-15 12:14:20

thanks P

will look into the best option for my setup and when complete i will post up my comment_ form and a link

Jeff_K · 2006-01-16 09:38:40

Just an (obvious) note about the example posted about: make sure that you use “.button” in your stylesheet for class=“button”, and “#button” for id=“button”.

systrum · 2006-01-23 09:57:00

Here is what i ended up with in my comment_form to get what u see Here

probably not the best method but it seems to look ok in most browsers on both mac and pc.
if you see any probs, then please be sure to let me know.

<code><table cellpadding=“4” cellspacing=“0” border=“0”> <tr> <td align=“right” valign=“top”>Name</td> <td valign=“top”><input type=“text” name=“name” value=”“ style=“border: 1px solid #EBECEC;” size=“25” tabindex=“1” /></td> </tr> <tr> <td align=“right” valign=“top”>URL</td> <td valign=“top”><input type=“text” name=“web” value=”“ style=“border: 1px solid #EBECEC;” size=“25” tabindex=“1” /></td> </tr> <tr> <td align=“right” valign=“top”>Email</td> <td valign=“top”><input type=“text” name=“email” value=”“ style=“border: 1px solid #EBECEC;” size=“25” tabindex=“1” /></td> </tr> <tr> <td valign=“top” align=“right”> <txp:text item=“Message” /> </td> <td valign=“top” colspan=“2”><textarea name=“message” cols=“30” rows=“12” style=“width:360px;height:100px;border: 1px solid #EBECEC;” tabindex=“4”></textarea></td> </tr> <tr> <td align=“right” valign=“top”> </td> <td valign=“top” align=“left”> <txp:comment_preview /> <input type=“submit” name=“submit” value=“Submit” style=“background-image: url(submitButton.gif); background-color: #F9F9F7; width: 56px; height: 22px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: center; line-height: 22px;”/> </td> </tr> </table></code>

Textpattern CMS

Textpattern CMS support forum

#1 2006-01-13 12:36:52

masking submit button with a gif

#2 2006-01-14 22:36:52

Re: masking submit button with a gif

#3 2006-01-15 01:26:22

Re: masking submit button with a gif

#4 2006-01-15 09:16:04

Re: masking submit button with a gif

#5 2006-01-15 09:37:06

Re: masking submit button with a gif

#6 2006-01-15 09:41:50

Re: masking submit button with a gif

#7 2006-01-15 10:16:05

Re: masking submit button with a gif

#8 2006-01-15 10:40:08

Re: masking submit button with a gif

#9 2006-01-15 11:25:58

Re: masking submit button with a gif

#10 2006-01-15 12:14:20

Re: masking submit button with a gif

#11 2006-01-16 09:38:40

Re: masking submit button with a gif

#12 2006-01-23 09:57:00

Re: masking submit button with a gif

Board footer