Submit button & alternate text with images disabled

beebs93 · October 27, 2010, 1:20am

If you have a single submit button on a HTML form can you supply alt text that will display with images disabled IF you are using a CSS sprite for a background image?

I tried using both <input> and [URL=“http://www.heybeebe.com/test/css-button-submit/indexButton.php”]<button>, but with no success (with images disabled).

With <input> you can use the alt attribute without error (I am guessing because you can use a simple static image as the button with type=“image” and src=“image.jpg”), however, <button> does not allow alt to be used.

Thanks for any help

ralphm · October 27, 2010, 1:49am

The text isn’t showing up on your input example because you have

text-indent:-999px;

in the CSS. That’s not needed, so just remove it. It would be best to keep the Value text very short so it doesn’t overflow and get hidden.

EDIT: dang, yes it is, sorry, as it appears over the image otherwise. I’ll test for a better solution…

beebs93 · October 27, 2010, 2:09am

I tried earlier to wrap a <div> around that <input> tag in question, but with no luck. If I remember:

.
.
.
<div id="submitButton">
   <input type="image" src="send.jpg" alt="This is ALT text" name="submit" />
</div>

with this CSS:

#submitButton {
margin:0;
padding:0;
height:100px;
width:100px;
overflow:hidden;
}

#submitButton:hover {
cursor:pointer;
text-indent:-101px;
}

The alt text does show up with images disabled, but the text itself “runs away” due to the text-indent:left; on hover so you can only SEE it, but not click it. :headbang:

ralphm · October 27, 2010, 2:49am

I tried what I thought would be simple, but there is a problem in FF that I can’t fix. works fine in Safari, though.

Got some help from this page: http://techblog.procurios.nl/k/news/view/33023/14863/Transforming-the-button-element-with-sliding-doors-and-image-sprites.html but still couldn’t fix the FF problem of moving the span image down.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
button {
	height:100px;
	width:100px;
	padding:0;
	border:0;
	cursor:pointer;
	overflow: hidden;
	position:relative;
}

button span {
        height:100px;
	width:100px;
	display: block;
	background:url('send.jpg') 0 0;
	position: absolute;
	top:0;
	left:0;
}

button:hover span {
	cursor:pointer;
	background-position:-100px 0;
}

button::-moz-focus-inner /* fixing evil default firefox padding */ {  
	padding:0;  
	border:none;  
}  
</style>

<title>Input Submit</title>
</head>
<body>

<form action="" method="post">
	<p><input type="text" name="first" value="" size="40" maxlength="40" /></p>

	<p><input type="text" name="last" value="" size="40" maxlength="40" /></p>

	<p><input type="text" name="email "value="" size="40" maxlength="80" /></p>

	<p><textarea name="m" rows="10" cols="80"></textarea></p>

	<p><input type="hidden" name="submitted" value="TRUE" /></p>
	
	<button type="submit" name="submit" value="This is VALUE text" title="This is TITLE text">This is BUTTON text<span></span></button>
</form>

</body>
</html>

Edit: Hrmmm, same problem in IE8 as in FF.

beebs93 · October 27, 2010, 2:56am

Thanks, ralph. I’ll give it a look

Seems like a lot of extra work with relatively weak compatibility for just a button, doesn’t it?

ralphm · October 27, 2010, 3:00am

Well, usually it’s easy to position a span over something for the purposes of a sprite. I’m just confused as to why the button element is so resistant to this method. Obviously something I’m missing.

RyanReese · October 27, 2010, 3:19pm

Ralph I don’t have send.jpg…can you upload that example online? I feel like I should know why this isn’t working. I think I’ve ran into something like this b efore

ralphm · October 27, 2010, 10:33pm

Just grab it from the link beebs provided above:
http://www.heybeebe.com/test/indexButton.php

beebs93 · October 27, 2010, 11:09pm

In case it helps, I made another page just with Ralph’s attempted solution.

I also noticed it does indeed work in the current version of Chrome (7.0.517.41) (contrary to that article - wonder if the Google devs will share that tidbit with Mozilla).

ralphm · October 27, 2010, 11:17pm

Yeah, works in Safari, Chrome and Opera. Just not IE or FF … so not much use. There must be a simple solution to this, or a better method altogether.

beebs93 · October 28, 2010, 5:38am

This is the best I could come up with:

http://www.heybeebe.com/test/indexBeebs.php

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<title>Input Submit</title>
</head>
<body>

<form action="" method="post">
	<p><input type="text" name="first" value="" size="40" maxlength="40" /></p>

	<p><input type="text" name="last" value="" size="40" maxlength="40" /></p>

	<p><input type="text" name="email "value="" size="40" maxlength="80" /></p>

	<p><textarea name="m" rows="10" cols="80"></textarea></p>

	<p><input type="hidden" name="submitted" value="TRUE" /></p>
	
	<div id="submitButtonDiv">
		<input id="submitButton" type="image" src="blank.gif" name="submit" value="INPUT VALUE text" alt="Send" title="INPUT TITLE text" />
	</div>
</form>

</body>
</html>

The CSS:

#submitButtonDiv {
	height:100px;
	width:100px;
	padding:0;
	border:0;
	background:url('send.jpg') 0 0;
	overflow:hidden;
}

#submitButtonDiv:hover {
	cursor:pointer;
	background-position:-100px 0;
}

#submitButton {
	height:100px;
	width:100px;
	display:block;
}

It’s not the prettiest solution as it A) relies on a <div> element for the :hover pseudo class and B) creates another HTTP request (with the blank.gif). The :hover IE problem can be fixed with a .htc, but still seems like there should be a simpler solution.
I know <button> is meant for styling submit buttons, but I just couldn’t figure out that offset bug.
So far, the alt text shows up with images disabled on FF, Chrome and Opera (Mac).
Safari does not display the alt text (or any other alt text from other websites - am I late to the party on realizing this one?).
I haven’t tested it in IE yet (PC is unavailable).
Chrome will only display the alt text if it’s narrower than the image so one is limited by the dimensions of the blank.gif.

If I have to use a generic submit button then so be it, but damnit I don’t want to let the summabeach win. :scratch:

beebs93 · October 28, 2010, 9:16pm

It works in IE8, but with IETester IE6 & 7 do not display any alt text (or on normal images with regular alt text) so I cannot use that as a valid test.

I cringe as I write this, but would it be safe to assume IE6 & 7 would display alt text the same way as IE8?

system · October 28, 2010, 9:37pm

i use utilu ie collection. it shows INPUT VALUE text tool tip and Send alt text when images are disabled in ie6-7

beebs93 · October 28, 2010, 9:40pm

Beauty! Thanks

PaulOB · October 31, 2010, 5:59pm

If you want you can actually use the submit button with a sprite and is a better alternative because image inputs don’t supply the name value pairs by default and require additional javascript.

Here’s an example.

http://www.pmob.co.uk/temp/input-rollover-test.htm

IE6’s hover is assisted with a little JS.

beebs93 · October 31, 2010, 6:37pm

Thanks, Paul!

A couple small questions:

#form1 .submit input{
.
.
.
	text-transform: capitalize;/* ie needs this to hide text*/
.
.
.
}

I looked through your SP reference on [FONT=“Courier New”]text-transform[/FONT], but I couldn’t decipher why this helps IE hide text.

#form1 .submit,#form1 .submit label{
	width:150px;
	height:25px;
	position:relative;
	display:block;
	overflow:hidden;
}

Why are we doing this for the div AND the label?

PaulOB · October 31, 2010, 9:42pm

Hi,

beebs93:

Thanks, Paul!

A couple small questions:
#form1 .submit input{
.
.
.
    text-transform: capitalize;/* ie needs this to hide text*/
.
.
.
}
I looked through your SP reference on [FONT=Courier New]text-transform[/FONT], but I couldn’t decipher why this helps IE hide text.

No you won’t find much documentation about this but it’s another strange IE quirk and the negative text-indent in the input doesn’t work unless you set it to text-transform:capitalize. There is no rhyme or reason for it and it’s much like the way that display:inline fixes the double margin float bug for no reason other than it does.

#form1 .submit,#form1 .submit label{
    width:150px;
    height:25px;
    position:relative;
    display:block;
    overflow:hidden;
}

Why are we doing this for the div AND the label?

The label and the input are both made exactly the same size and then the input is placed on top of the text in the label thus hiding it.

If images are missing or turned off then you see the label text that is under the transparent input and you still know that you have to click it.

If on the other hand css is turned off you get a proper submit button as usual and it also a label to the side. It’s a win win situation and semantically sound as the label is associated with the input and provides extra meaning. The submit button is also doing the job it was designed for.

The input type=image isn’t a bad solution but doesn’t automatically pass the name value pairs like an input but I know you can add extra details with hidden inputs anyway.

beebs93 · October 31, 2010, 9:51pm

Aaaah ok - now my brain is firing on all eight cylinders.

Yeah, my solutions works, but it lacks simplicity so I’ll stick with your lean 'n mean version

Thanks again, Paul

Topic		Replies	Views
Submit button blunder HTML & CSS	5	577	July 20, 2010
Hiding Button Text in IE7 HTML & CSS	18	2254	May 26, 2010
Using Image for Submit Button HTML & CSS	20	19013	May 2, 2011
Proper way to use Image Button in Form HTML & CSS	40	8155	September 7, 2011
Submit button image with ie HTML & CSS	2	736	May 10, 2011

Submit button & alternate text with images disabled

Related topics