I'm having trouble creating a submit button for my form that includes both an image and text. I've tried multiple methods, but encountered some issues. Here's the HTML code:
<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">
This is my CSS:
#reservation span{
display: inline-block;
z-index: 100;
}
#reservation input{
margin-top: -30px;
z-index: -100;
}
The problem is that the z-index property isn't working as expected, causing the picture to overlap the text. I then attempted another approach using a div element. Here's the HTML code for that:
<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>
And here's the CSS for this method:
.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%;
}
While this solution makes the image and text display nicely together, only the sides of the button are functional as links within the form. The middle portion behaves like a text layer. Can anyone offer assistance with this issue? :)