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
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.
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 ;))
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.
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?
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)
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.