1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

More CSS issues, This time Submit button

Discussion in 'Web Development & Web Hosting' started by twizzle, May 14, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Have you tried <input type="image" instead of 'submit'?

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

    HTH

    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  3. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    I tried that but i get thet attached image
     

    Attached Files:

    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  4. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    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
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  5. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  6. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    just viewed the source on your page and it is :-

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

    Try changing the type to button.

    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  7. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  8. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  9. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    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
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  10. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  11. Bluerinse
    Honorary Member

    Bluerinse Exabyte Poster

    8,871
    167
    256
    Be careful using non standard fonts that others may not have on their computers, as it will not render in those user agents.
     
    Certifications: C&G Electronics - MCSA (W2K) MCSE (W2K)
  12. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  13. Bluerinse
    Honorary Member

    Bluerinse Exabyte Poster

    8,871
    167
    256
    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
     
    Certifications: C&G Electronics - MCSA (W2K) MCSE (W2K)
  14. Boycie
    Honorary Member

    Boycie Senior Beer Tester

    6,281
    85
    174
    slightly off topic, but i'd suggest putting a captcha in the form.
     
    Certifications: MCSA 2003, MCDST, A+, N+, CTT+, MCT
  15. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...