On 9/21/05, David Feldman <[EMAIL PROTECTED]> wrote:
> I'm creating a number of forms with styled buttons. I've given up on
> both <input> and <button> elements because of the variable-width
> padding IE adds to them (as well as the 1px border IE puts around
> their background images) and am using <a> tags instead, styled with
> CSS and with href="javascript:..." attributes.
>
> The problem is getting the Enter key to submit the form when the
> cursor is in one of its fields. In Firefox it's easy: I just add a
> submit <input> or <button> and hide it with CSS. But IE doesn't like
> that...if the button is hidden the form won't submit. The best I've
> been able to do is leave the button visible and move it way
> offscreen, i.e. position:absolute; top:-2000px; left:-2000px. But
> that's ugly. Any suggestions for a better way?
>
I just did the same thing ... I can't find the tutorial I used at the
moment, but here's what I did. I created an invisible graphic the
same size as the button I want ... then I create a button image of the
same size to use as the background. The trick is to use two buttons -
one submit and one image. The code below goes a step further with a
rollover effect:
<input class="submit-button" alt="enter" name="enter" type="submit"
value="enter" src="button-bg.gif" />
<input alt="enter" name="enter" class="button" type="image"
id="img-button" src="transparent-button-bg.gif" />
and the associated CSS:
input.submit-button {
display: none;
}
input.button {
width: 60px;
height: 26px;
background: #EEE url(button-rollover.gif) no-repeat;
outline: none;
}
input.button:hover {
background: #EEE url(button-rollover.gif) no-repeat 0 -26px;
}
Drew
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
