Hiding Button Text in IE7

How do you hide the button text (value) in IE7?

My CSS

#main_body input.button_text

{
	width:85px;
	height:29px;
	border:0;
	padding:0;
	margin:0;
	cursor:hand;
	cursor:pointer;
	text-indent:-9999px;
	background-image:url(your image);
	background-repeat:no-repeat;
	background-color:none;

}

My HTML

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />

Works in all browsers except IE7 :frowning: Any ideasā€¦

Hmm I donā€™t get alt text unless I set a size a size in the CSS and thatā€™s in Safari 4.05 PC & Mac. I wonder if its your large font/120dpi settings allowing more room for the text to show (or have you got a newer nightly build).

On another matter Iā€™ve also just noticed in Safari that if you disable images from the develop menu you donā€™t get any alt text either unlike Firefox. Itā€™s just blank.

Except Operaā€™s minimum font-size is making the white input text render OVER your image, and you cannot trust the different browsers to make the width and height end up the same size on the inputā€¦

Thatā€™s a good point and I missed out the negative text-indent trick I posted right at the start in post #3 :slight_smile:

Also thereā€™s something strange going on in Opera 10.53 (and 9.55) because I donā€™t see any text anyway (and again this may be your settings so I accept that you may be seeing it). In my versions the minimum font-size is only obeyed if you set a font-size greater than zero. If you set font-size:1px you get 9px (the default min size) but if you set font-size:0 you get nothing. This happens in 10.52 and 9.55 but not in 9.2.

Firefoxā€™s minimum font-size is the same also and if you set font-size:0 you get nothing but if you set 1px or greater then you get the minimum font-size. Safari seems to obey the minimum even if you set zero though.

The negative text-indent trick works for me in opera 10.53 and 9.55 (but not in 9.2) and also works for me in Safari.

THOUGH - I think you were on the right trackā€¦ I dislike all the excess absolute positioning and messing with z-index though, and overcoming operaā€™s min-font-size means needing a slightly different approachā€¦

Rather than absolute positioning the input just ride it up with a negative margin, rather than try to hide the input text with font-color and font-size, make the parent container overflow and then just pad the **** out of the input. We donā€™t need z-index since a position:relative after the absolute in the source order will depth sort automatically.

Yes I have no problems with that alternative and the padding method for hiding text seems to work fine.:slight_smile:

Consistancy - great when the specification doesnā€™t even say you have to obey font-size much less what zero actually means :wink:

Beats what I was doing which was to put input[image] inside a overflow label and slide the input up and down with absolute positioning. (looked like ass images off)

I was using type=ā€œimageā€ where the image was a transparent gif with alt text. Underneath was a CSS background that slide around on states.

Hm, was. Still am, actually. I should check this version out.

Yes itā€™s transparent and sits on top of the text underneath so remains clickable. Itā€™s similar to the normal gilder/levin replacement except that you place the input on top of a label instead of placing a span image on top of the text you want to hide.

Usually submits donā€™t have labels because they are self explanatory but adding one does no harm (and in theory could enhance accessibility).

The only downside is if you wanted transparent images and then you would see the text underneath which is the same drawback fro Gilder/Levin method (which I was already using before they claimed ownership of it ;))

Should we call it the Oā€™Brien method then ? : ) Wait, no, thereā€™d be 50 other things with the same name!

Historically the type=ā€œimageā€ was very unreliable so some of us still avoid it for historical reasons although things are better these days. The main reason to avoid its use these days is that type="image doesnā€™t send itā€™s [URL=ā€œhttp://www.google.co.uk/search?hl=en&rlz=1G1GGLQ_ENUK317&q=name+value+pairs+and+input+type%3D%22image%22&aq=f&aqi=&aql=&oq=&gs_rfai=ā€]name/value pair in the same way that the normal submit does and you would need to add scripting to rectify this. the normal submit button has none of these problems.

You can include the alt attribute in the type=ā€œimageā€ but safari and chrome will only show a question mark (or blank image placeholder and wonā€™t show the alt text) if the image is missing. The input shrinks to accommodate the question mark and the alt text is missing. You could add height and width attributes to the input and then the text will show but that is invalid for the input type=ā€œimageā€. There is a solution in that you could set the width and height via css for this and then you will see the alt text.

All in all I think my method wins out :slight_smile:

Is the clickability preserved because the input is also pos: absolute (and last-in-source)?

So, question, if it takes me a good several minutes to load all images, and the image doesnā€™t show up when I get to that button, do I know to click it without text?

I am not seeing it in IE7 so it might be IE6. Thanks for the info :slight_smile:

Probably Pauls since the text wouldnā€™t be hidden (font size 0) and itā€™s only one line of code :slight_smile:

Ah, since the ONLY major browser that had problems was Netscape Heritage BEFORE firefux was a twinkle in a FLOSS fanboys eye I stopped caring about that eight years ago.

Ok, that makes sense.

Doesnā€™t do that hereā€¦ I get alt text. Recent fix?

Except Operaā€™s minimum font-size is making the white input text render OVER your image, and you cannot trust the different browsers to make the width and height end up the same size on the inputā€¦

THOUGH - I think you were on the right trackā€¦ I dislike all the excess absolute positioning and messing with z-index though, and overcoming operaā€™s min-font-size means needing a slightly different approachā€¦

something like:


#sub {
	position:relative;
	overflow:hidden;
	width:100px;
	height:50px;
	text-align:center;
	margin:0 auto; /* auto both directions causes some handhelds (Nokia) to pad the top == screen height! */
}

#sub label {
	display:block;
	text-align:center;
	line-height:50px;
	color:#FFF;
	background:#F00;
}

#sub label span {
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:50px;
	background:url(images/submit.gif) top left no-repeat;
}

#sub input {
	position:relative;
	margin-top:-50px; /* == #sub height */
	padding:50px 100px;
	/* 
		top/left padding equal to container height and width pushes
		the text outside our overflow:hidden parent container
	*/
	background:transparent;
	border:0;
	cursor:pointer;
	cursor:hand;
}

Rather than absolute positioning the input just ride it up with a negative margin, rather than try to hide the input text with font-color and font-size, make the parent container overflow and then just pad the **** out of the input. We donā€™t need z-index since a position:relative after the absolute in the source order will depth sort automatically.

The big thing I think I like this approach for would be that you can then add hover states. Beats what I was doing which was to put input[image] inside a overflow label and slide the input up and down with absolute positioning. (looked like ass images off)

I also found that this works too.

font-size:0; line-height:0;

I wonder which is a better approach?

To hide the text in iE use this trick.


input {
   [B] text-transform: capitalize;[/B]
    text-indent:-999em;
    display:block
}


The capitalise allows the text-indent to work for some strange reason

Uhm, silly questionā€¦

But why not <input type=ā€œimageā€ /> ???

Then you can just alt text it and not have to screw with CSS trickery in the first placeā€¦

If you have images disabled in the browser then you wouldnā€™t have a clue what the button is for.

At least doing it that way would provide the text for when CSS styling of forms is disabled - I have seen lots of sites where if you visiit usiing Opera and have unchecked the option allowing styles to be applied to form field that the buttons appear blank.

You could work around IEā€™s failings by using a <button> element instead, and wrap the text in a span before sending it left:


<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
    button {
	width:85px;
	height:29px;
	border:0;
	padding:0;
	margin:0;
	cursor:hand;
	cursor:pointer;
	background-image:url(image.gif);
	background-repeat:no-repeat;
	background-color:none;
}

    button span {
        text-indent: -9999px;
}
</style>
	
</head>

<body>

<button id="saveForm" type="submit" name="submit" value="send"><span>Submit</span></button>

</body>

</html>

Thatā€™s my take on it, anyhow. :slight_smile:

If I remember correctly that will still leave a tiny line in the button. I canā€™t remember if that was IE6 or 7 though.

I came up with an almost full-proof version some time ago that seems to satisfy all the requirements (apart from transparent images).

http://www.pmob.co.uk/temp/form-submit-image.htm

Works with images on/off and css on/off or any combination.