At 6/17/2009 06:45 PM, Jens-Uwe Korff wrote:
on an ASP.NET-driven site we'd like to use background images for
flexible-width submit inputs.
Due to the .NET limitation we cannot use the <button> tag and are
stuck with the following syntax:
<input type="submit" value="Button Text" />
Did you ever style these submit inputs with background images that
allowed a flexible width?
I have successfully applied a background image to input, for example
the join-list form on this pre-launch site:
http://innerpeaceyogatherapy.com.s9135.gridserver.com/
I consider the above solution, with its single background image, to
be a mediocre, interim placeholder approach because this image with
its rounded corners doesn't support text-resizing well. If you
enlarge text separately from layout, the background image repeats,
spoiling the cosmetic effect. (We're using a fixed width in this
instance, but the same applies to horizontal repeats.) In this
particular case our background image is such that input text remains
legible on enlargement but we sacrifice the cosmetic single-pill
appearance. If we were using a plain rectangle with at most say a
uni-directional gradient but without special top- & side-caps, we
could simply allow it to repeat vertically & horizontally without
cosmetic penalty.
To support rounded corners in an enlargeable context, I'd surround
each input control with a matrix of divs and apply fragmented
background images to those parts to allow for variable height &
width. ...Pending universal implementation of CSS3's multiple backgrounds!
One of the usability/accessibility problems with background images on
input fields is that in order for the background image to display you
need to override the default border & background color. Then if you
disable images the input field disappears. I suppose a workaround
would be possible in which the input field is positioned on top of a
div with a border and/or background color that would show through if
the input's background image were missing from the rendering.
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
