7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

How do I make my CSS submit button actually "submit"?

by Nick Brighton
5 replies
  • WEB DESIGN
    • |
Hey all,

Wonder if you can help me? I'm trying to customize a form submit button using a css rollover like this:

#submit {
background-image: url(Images/button.png);
display: block;
height: 60px;
width: 299px;
}
#submit:hover {
background-position: 0 -60px;

}
#submit span
{
display: none;
}


The rollover/appearance looks fine in all browsers, but how do I turn this into an actual submit button without having the grey submit box showing up in the background?!

My html code is:

<table>
<tr>

<td width="240"><input name="Email1" type="text" size="40" ></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" input id="submit" />

</td>

I've tried changing input type from "button" to "hidden" but then it deactivates the button functionality.

Any help would be more than appreciated, really it would...
#arrgh #driving #nuts #simple #task
  • Profile picture of the author HomeBizNizz
    You'll need the form tags too...

    <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="submit" name="Submit" value="Submit" />
    </form>

    action="process.php" sends to a PHP script f.ex...
    {{ DiscussionBoard.errors[976782].message }}
  • Profile picture of the author Kezz
    Try specifically telling your ID that it is applied to an input tag. eg. input#submit

    Let us know if that works.
    {{ DiscussionBoard.errors[977514].message }}
  • Profile picture of the author n7 Studios
    PHP Code:
    <html>
    <    head>
    <    style type="text/css">
    #submit {
            width: 299px;
            height: 60px;
            background: url(button.gif) 0 0 no-repeat;
            border: none;
    }
    #submit:hover {
            background: url(button.gif) 0 -60px no-repeat;
            cursor: pointer;
    }
    </    style>
    </    head>

    <    body>
    <    form action="" method="post">
        <    input type="submit" name="Submit" value="" id="submit" />
    </    form>
    </    body>
    </    html> 
    But this won't work in IE6 - IE6 doesn't support the :hover pseudo class on anything other than a link i.e. <a href...></a>
    Signature
    THE Web Development Guru - Bespoke WordPress Theme, Plugin + iPhone Apps [HTML5, CSS3, PHP, MySQL].
    {{ DiscussionBoard.errors[977662].message }}
  • Profile picture of the author Nick Brighton
    Thanks for the suggestions guys, but this still isn't working. I keep getting the grey box in the background instead of just the image.

    Weird, any other ideas?
    {{ DiscussionBoard.errors[979020].message }}
  • Profile picture of the author n7 Studios
    You've got some other CSS that's providing a grey background colour on input elements.

    Get Firefox. Get Web Developer and Firebug plugins. Learn to use them. You'll be able to then see the CSS rules being applied to HTML elements, and fix these issues in seconds.
    Signature
    THE Web Development Guru - Bespoke WordPress Theme, Plugin + iPhone Apps [HTML5, CSS3, PHP, MySQL].
    {{ DiscussionBoard.errors[979733].message }}

Trending Topics