Submit button blunder

HTML & CSS
1


http://www.pauserefreshment.co.uk/coffee-machine-brochure-request.html

Hi from 15°C 94% humidity Wakefiled UK :slight_smile:

On this page -
http://www.pauserefreshment.co.uk/coffee-machine-brochure-request.html
i’ve got a problem with the submit button in that I just cant get rid of the text - “Submit button” sitting over the graphic.

Also how do i get rid of the block of whitespace between Order a Brochure & enter your contact details - (looking via IE 8).

Can any sitepoint member please give me clue as how to get rid of it?

Any insights welcome :slight_smile:

2

Tried to get the alt tag to work, which I know how to do. Done it a millions times but in differenet markup. Just cant get it to work in this context. Anyways thanks for all your help, I’m out of time so cant make anymore improvements.

3

Good idea: like all images, it requires alt text (instead of a value attribute) which can be shown when images don’t load.

However I would go ahead and have a hover/focus style and add cursor: pointer to it as well (for any browsers who refuse to do that with images). It needs to act like a button so people know right away that it is, indeed, a button.

4

You know there is an <input type=“image” /> … right? :slight_smile:

That would also be better suited in this case because it still shows up when a non-css capable visitor comes by, whereas your css background will disappear in that case.

5

if i m getting it right then you need to remove value of submit button


<input type="submit" [COLOR="Red"]value="Order Brochure"[/COLOR]>

vineet

6

<input type=“image” src=“image.png” alt=“Order Brochure”>

You’ll only see the alt text if the image doesn’t load… so the assumption is that the text is part of the image.