Similar to what was discussed in one of my previous threads here, I would like to utilize the same concept for the e-mail submission box, in anticipation that the visitor may have images turned off in their browser; however, this would be going over a form element, and there seems to be a bit more than an anchor that has a span over it.
I would like to put some text under the image somehow, so that it will be displayed if the images are turned off. Thinking back on the previous thread, this is the technique utilized:
<h3 id="sectionhomelink"><a alt="Home Page" title="Go to the Home Page." href="index.html">Back to Home Page<span></span></a></h3>
As Ralph said above which image do you mean as there is o image in your form code.
If you are using a background image in the submit then you will have the value holding the text content anyway so nothing needs to be done unless you are moving the text content out of the way of course (with something like text-indent). In that scenario images off will show nothing as the css is removed although screen readers will probably be ok as they will see the value attribute.
What I have done previously is to use an associated label to hold the text and then place the input on top to hide it. This ensures that in any scenario of images/css on/off the user will still get something usable.
OK, we misunderstood what you were asking. It would be better to separate the text from the background image, and put that text in the HTML itself. Then you could use an image replacement technique if you wanted to eep the font you have:
Yes, I believe this produced what I need to cover for when images are turned off. However, this seems to be a very different image replacement technique than the one I learned about before.
I understand how the z-index comes into play so that the input fields appear above the image. I understand the span over the label. I understand why emailbox and the span are absolutely placed- because #emailbox has the image attached to it, and so that the image appears over the label’s text, which is placed relatively below the image in the span.
What I don’t understand:
#emailbox is given a float for reasons unknown
Overflow is hidden, which I don’t understand.
Thank you for your posts. This is just what I needed.
It was taken from your own code which had the element floated left so I left it in place as you obviously needed it floated. It is not needed for the technique to work.
Overflow is hidden, which I don’t understand.
The overflow:hidden is to stop any text from peeking out under the image should the text be wider than the image or indeed should the user resize the text larger.
Thank you for your posts. This is just what I needed.