Image and Form Button

[comptech520]

Can I put an image (16x16) in a form button with out making an image for the login button?

[sstalder]

Your question is not very clear... Do you want to place an image inside a button, or use an image as a button?

You can do both.

Set an image as a background with styles:

<style type="text/css">
.imgButton {
background: url(image.jpg) no-repeat;
border: none;
height: 16px;
width: 16px;
}
</style>
<input type="submit" name="submit" value="Submit" class="imgButton" />

[comptech520]

The way this is done is the image shows and the text lays ontop of it. How can I make so there is the image and then next to it is the text?

This is my code
.imagebuttonstyle {
background:#FFFFFF;
color:#000000;
font-size:8pt;
background: url(http://www.mydomain.com/images/lock.png) no-repeat;
border-width:1px;
border-style:solid;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

<input class="imagebuttonstyle" name="submit" type="submit" value="Login" />

[Theremin]

<input class="imagebuttonstyle" name="submit" type="submit" />Login</p>

just put <p> tags inside the <form> tags

[sstalder]

.imagebuttonstyle {
background:#FFFFFF;
color:#000000;
font-size:8pt;
background: url(http://www.mydomain.com/images/lock.png) no-repeat;
border-width:1px;
border-style:solid;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

<input class="imagebuttonstyle" name="submit" type="submit" value="" /> Login

[comptech520]

goto http://clients.esctonline.com and you will see what I mean

[sstalder]

This is assuming your image size is proper (i.e. 16x16 px or whatever fits in your button).

.imagebuttonstyle {
    background:#FFFFFF;
    color:#000000;
    font-size:8pt;
    background: #FFFFFF url(http://www.mydomain.com/images/lock.png) no-repeat;
    background-position: left;
    text-align: center;
    border-width:1px;
    border-style:solid;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

<input class="imagebuttonstyle" name="submit" type="submit" value="Login" /> 

[comptech520]

that didnt seem to do the trick

[sstalder]

Can I see your actual page?

[comptech520]

clients.esctonline.com

[sstalder]

Ok, can you show me an example of what you are trying to duplicate?

[comptech520]

I want a button to have an image in it

Button: |[image] Login|

Right now the button overlaps on the image.

[sstalder]

<style type="text/css">
.imagebuttonstyle { 
    background:#FFFFFF; 
    color:#000000; 
    font-size:8pt; 
    background: #FFFFFF url(http://www.mydomain.com/images/lock.png) no-repeat; 
    background-position: left; 
    text-align: right; 
    width: 100px;/* May need to adjust higher/lower to get expected result */
    border-width:1px; 
    border-style:solid; 
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    
}
</style>
<input class="imagebuttonstyle" name="submit" type="submit" value="Login" />