Hello guys

I'm trying to make a fancy submit button in a webpage so i have it as an image and i am using 
<input type="image" src="path/to/image">
But this only returns the x and y coordinates where u clicked the button

Any help ?
First of all you have to understand that HTML is for creating objects like text, buttons, images etc...
While CSS is for styling.

so you can simply use the submit button 
<input type="submit" class="imgSubmit"  />
in the css you can change the background-image: etc... 
.imgSubmit
{
border:none;
background-image: url('urlGoesHere');
width: something px;
height: something px;
}
something between these lines
Then the problem isn't with the line of code you wrote, I'm assuming you didn't specify the function for the button, so it used the "native" button function, otherwise include in your post the function code.

Good luck!
I'm not sure what is supposed to happen when you click an image input.
The FORM tag has a "target" (or was it "action"?) attribute (defaults to the same page) which is called when an input of type submit is called. I wonder if the image input should do the same thing than a submit input...
In any case you can also add "onclick" and write some javascript there...

PS: try searching for a reference on the INPUT and the FORM tags, they should indicate clearly how it's supposed to work.
I wasn't so clear in my question I forgot to say i was using javascript to make a login page

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <style type="text/css">
            #box {
                position:absolute;
                border:solid black 5px;
                border-width: 2px;
                border-color: white;
                top:25%;
                right:25%;
                bottom:25%;
                left:25%;
                padding:25px;
                margin:50px;
                color: whitesmoke;
            }
            #it{
                border: solid 0px #000000;
                font-size:2;
                width:55px;
                height:28px;

            }
        </style>
        <script language="javascript">
            <!--//
            /*This Script allows people to enter by using a form that asks for a
UserID and Password*/
            function passfunc() {
                var x=document.getElementById("user").value;
                var y=document.getElementById("pass").value;
                if (x=="ali") { 
                    if (y=="test") {              
                        location="page2.php" 
                    } else {
                        alert("Invalid Password")
                    }
                } else {  alert("Invalid UserID")
                }
            }
            //-->
        </script>
    </head>
    <body background="s2.jpg">
        <?php
        ?>

        <div id="box">

            <label>User Name  &nbsp;<input  type="text" id="user" value=""></br></label></br>
            <label> Password &nbsp; &nbsp;  <input  type="password" id="pass" value=""></label> </br></br>

            <input onClick="passfunc()" id="it" type="button" value="Login"> &nbsp; <input id="it" type="Reset">

        </div>


    </body>
</html>
I went with rtp suggestion and it worked perfectly , except my image had round edges and the rectangle outside is still visible , how can I fix that

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <style type="text/css">
            .imgSubmit
            {
                border:none;
                background-image: url(submit.png);
               
                width: 130px;
                height: 50px;
            }
            #box {
                position:absolute;
                border:solid black 5px;
                border-width: 2px;
                border-color: white;
                top:25%;
                right:25%;
                bottom:25%;
                left:25%;
                padding:25px;
                margin:50px;
                color: whitesmoke;
            }
            
        </style>
        <script language="javascript">
            <!--//
            /*This Script allows people to enter by using a form that asks for a
UserID and Password*/
            function passfunc() {
                var x=document.getElementById("user").value;
                var y=document.getElementById("pass").value;
                if (x=="ali") { 
                    if (y=="test") {              
                        location="page2.php" 
                    } else {
                        alert("Invalid Password")
                    }
                } else {  alert("Invalid UserID")
                }
            }
            //-->
        </script>
    </head>
    <body background="s2.jpg">
        <?php
        ?>

        <div id="box">

            <label>User Name  &nbsp;<input  type="text" id="user" value=""></br></label></br>
            <label> Password &nbsp; &nbsp;  <input  type="password" id="pass" value=""></label> </br></br>

            <input type="submit" onClick="passfunc()" class="imgSubmit" value=""> &nbsp; <input id="it" type="Reset">

        </div>


    </body>
</html>
try 
background:none;
border-radius:0;
note that background:none should be above background-image, it might overwrite the image if it was below it and we don't want that.
I found Something on my subject Here
You'll always get mouse co-ordinates for a submit button type="image"

You can use a standard submit type button and just apply styles to it to change the look. 
<input type="submit" id="search-submit" value=""
    style="background-image: url(/images/search-button.gif); border: solid 0px #000000; width: WIDTHpx; height: HEIGHTpx;" />
a note, it is bad practice to use 
&nbsp;
<br/>
Since they are not consistent on different browsers and they will cause you a lot of pain. Use margin and padding instead.

Create a separate file for your css
rtp wrotetry 
background:none;
border-radius:0;
note that background:none should be above background-image, it might overwrite the image if it was below it and we don't want that.
that didn't work while this did
background-color: transparent;
rtp wrotea note, it is bad practice to use 
&nbsp;
<br/>
Since they are not consistent on different browsers and they will cause you a lot of pain. Use margin and padding instead.

Create a separate file for your css
I knew I would get this comment and I know its bad but I am having some trouble alligning input boxes that's why I used it just temporarly

Thank you for your help
In design you should try to use float as much as possible because it renders the same across all browsers and screens.
I highly encourage you to learn how float and clear work.

You shouldn't use position absolute unless you really have too.

I would do something like this

HTML 
    <div id="box">

        <div class="loginInputWrapper">
            <div class="loginLeft">
                User Name
            </div>
            <div class="loginRight">
                <input type="text" id="user" value="">
            </div>
        </div>

        <div class="loginInputWrapper">
            <div class="loginLeft">
                Password
            </div>
            <div class="loginRight">
                <input type="password" id="pass" value="">
            </div>
        </div>

        <div class="loginInputWrapper">
            <input type="submit" onclick="passfunc()" class="imgSubmit" value="">
            <input id="it" type="Reset">
        </div>
    </div>
CSS 
        .loginInputWrapper
        {
            float: left;
            clear: left;
            margin: 10px 0 0 0;
        }

        .loginLeft
        {
            float: left;
            width: 100px;
            color: black;
        }

        .loginRight
        {
            float: left;
        }
I spent hours yesterday trying to figure this out and got mixed solution and nothing worked perfectly, but this is perfect, easy and organizing I owe u big time and will try to investigate more on float.
Thanks again u helped alot !
The main trick is the width. That is what is allowing it to align quite nicely.
When you have dynamic content you can't do that but since its a static content you can do that.

  .loginLeft
        {
            ...
            width: 100px;

        }
By default, div has a "block" width meaning its width will be 100%.
When you tell it to "float", it will change this "block" display to "inline" and go to the direction of your choosing. When it turns into "inline" it will no longer have a width of 100% but its width will be wrapped to the content of the div.

this is what happened automatically when you use float 

divNormal
{
display:block;  
width:100%;
}

divWithFloat
{
float:left;
display:inline;
}
I encourage you to play around float and design best practices before you try to build something.

hopefully you know the difference between a class and an id :P

sure thing ^_^
I know Id's are unique and used to specify a single element while class can be used to multiple elements and actually I am taking this web course now with other courses so I am short on time and in 1 course they feed u html,css,javascript and php so I am working on my own and w3schools.com is somehow very helpful

I have a question regarding what u said "You shouldn't use position absolute unless you really have too."

I am trying to place the whole div somewhere on the page so I am using
.mydiv{
                position:absolute;
                top: 25%;
                left: 35%;
                   
            }
How can this be done in another way ?
yeah i learned from w3schools mainly as well.

You should mainly use position absolute when you want to take advantage of the z-index. Other than that I wouldn't use it in normal case. I use float and clear as stated before and I simply use the default css of div which is quite nice as well.

instead of top and left, you would use margin

Most websites are centered in the middle, like lebgeeks for example. The content of the website is in center of the page. You can achieve this trick by putting a main div and centering it. However to center a div you need to give it a width, most website content is around 980px to 1000px since most monitors have a width 1024px ( that was an old survey... )

So you have a main div that is centered acting as a holder to the whole contents. Now that you have that centered you can simply float things :)

so if i want to build something like this website the code will look like
HTML 
    <div id="mainWrapper">
        <div class="logoWrapper">
            <div class="logoImage">
                <img src="..." alt="logo" />
            </div>
            <div class="logoText">
                A community for technology geeks in Lebanon
            </div>
        </div>
        <div class="menuWrapper">
            <ul> <!-- menus should be inside ul and li to be parsed properly by search engines, in HTML5 u should use nav instead of div class="menuWrapper" ... -->
                <li>Index</li>
                <li>Rules</li>
            </ul>
        </div>
    </div>
CSS 
        #mainWrapper
        {
            margin:0 auto;
            width:980px;
        }

        .logoWrapper
        {
            float: left; 
            clear: left;
        }

        .logoImage
        {
            float: left;
            margin:0 10px 0 0;
        }

        .logoText
        {
            float:left;
        }

        .menuWrapper
        {
            float: left; /* float left + clear left act like <br> it goes down a line, you can use margin to go lower or higher */
            clear: left;
        }
So the width is set then the browser sets the margin left and margin right to be equal and it should work but I don't know why left and right aren't equal for me



Or maybe it is ! but my content are on the left true ?
am not sure what you are talking about :D
Haha did u see the picture I posted ? I did what u said and I needed this content to be exactly in the middle while it is still to the left
oh ok :D

show me the code