Question

I try to make submit button of the form with image and text together. I have tried to do in several ways, but I got problems. HTML:

<form action="www.page.html" method="post"> 
some text
<span>Check The Page</span>
<input type="image" src="check.png" name="Check" alt="Check" width="161" height="30">

CSS:

#reservation span{
display: inline-block;
z-index: 100;
}

#reservation input{
margin-top: -30px;
z-index: -100;
}

Problem, that z-index does not work. Picture goes above of the text. If I do other way with div element. HTML:

<form action="www.page.html" method="post"> 
some text
<input type="submit" id="image-button" >Check The Page</input>  
    <div class="check">
      <input type="image" src="check.png" name="Check" >      
  <span>Check</span>
</div>

CSS:

.check { 
   margin-left: 10px;
   position: relative; 
   width: 100%; /* for IE 6 */
}

.check span { 
   position: absolute; 
   left: 0; 
   margin-top: 5px;
   margin-left: 10px;
   color: #ffffff;
   font-family: Calibri;
   font-size: 16px;
   font-weight: bold;
   font-style: italic;
   text-shadow: #222222 1px 1px 0;
   width: 100%; 
}

Then the image and text looks nice, however only sides of the button are working as a link of the form and the middle of the button is a text layer. Any help? 🙂

Answer 1

#image-button
{
    background-image: url('check.png');
    background-position: left;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0px;
    width: 161px;
    height: 30px;
    text-align:right;
}

<input type="submit" id="image-button" value="Check the page" /> 

You have to mess with the background-position, height and width of the image, and the text-align to get the positioning you want, but this should work.