More CSS issues, This time Submit button

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Ok now i'm starting to get teh hang of web design using CSS, i've hit another problem.

A customer wants an image as thier submit button on a contact form. I can get that working. Only issue is it shows Submit Query in black text imposed over my button. I cant see why its doing this. Can anyone help?

Css:-

.button{
float:left;
border:none;
background: url('images/submitoff.gif') no-repeat;
width:100px;
height:50px;

}

.button:hover{
float:left;
border:none;
background:url('images/submiton.gif') no-repeat;
width:100px;
height:50px;
}


HTML:
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<input type="submit" class="button">


I'm not sure if you need the rest of the HTML to help, if so just shout.

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Have you tried <input type="image" instead of 'submit'?

That's how I've got mine set up.

HTH

NB

 

I tried that but i get thet attached image

 

Just done a test using your code and some quick images, and with the line below it works ok:-

<input type="button" class="button">

HTH
NB

 

Its not working for me so must be something else in the code somewhere.

heres a link to the page thats giving me the problem. Any help appreciated.

http://www.squiretwizz.co.uk/burners/contact.html

 

just viewed the source on your page and it is :-

<input type="image" class="button">

Try changing the type to button.

NB

 

Ok thanks for that its sort of working now. However when you click it once the roll over image has appeared it now goes to a blank square...... and i'm so close to finishing this site for teh customer arghhhhhhh

 

Also noticed teh submit button doesnt actually submit any more. I must have deleted teh part of teh code taht does that. Damn cant remember what that was.

 

Add this to your .button style

text-indent:-9999px;

And then change the Input line to:-

<input type="submit" class="button" name="submit">

You may also need a 'method' on your Form tag of "Post".

NB

 

Sorted now, i had to put a bit of JS in there for an onClick action. Also got it to validate teh form before submitting. So its all fixed except boss dosent like the font seen in Google Chrome, its all fine in IE and FF!
Ah well no matter.

Thanks for the help NB

 

Be careful using non standard fonts that others may not have on their computers, as it will not render in those user agents.

 

Yeah thats what i thought as i'm using Georgia as teh font. So i changed my css so it says:

Font-family: Georgia, Arial, Verdana;

And yet that doesnt seem to change the font used by Chrome which is Times New Roman.

As i understood it, by listing the 3 fonts in my css the browser should try using those first before rendering in its own native font. Arial is supported by Chrome yet this dosent work still.

 

Well i cant say I'm surprised, when i was into designing web pages, I pulled most of my hair out trying to get things to behave in all of the major browsers out there.

BTW you are supposed to end the font-list with one of the five generic fonts, though i doubt it will help..

http://www.w3.org/Style/Examples/007/fonts

 

slightly off topic, but i'd suggest putting a captcha in the form.

 

Unfortunatley the company wont let me do that. They wont put email address on web pages because they reckon it gets spam, yet they wont protect a form. Our company dosnt always do things correctly or logically, just what the boss decides to do and how to do it.