View Full Version : Image button text w/o JS

11-16-2002, 10:40 AM
1) I can't use javascript because the search engines don't read it. I must use 'a' tag but it isn't working.

2) I'm using a background image within a table. The image has eyes on the left of it. How do I place the text exactly where I want it? Text-align:center/right just isn't good enough because it extends off the button when aligned right and over the eyes when aligned center. I need precise placing. Thanks

<a href="http://yahoo.com">
<td><button style="background-image:url(eyez.gif);color:white;font:bold 11 verdana;cursor:hand;text-align:center;width:138;height:30;border:none">TELLAFRIEND</button></a></td>


11-16-2002, 11:12 AM
you play around with the left padding until you get a suitable position....

<button style="background-image: url(eyez.gif); color: white; font: bold 11 verdana; cursor: hand; text-align:center; width:138; height:30; border: none; padding-left: 20px">TELLAFRIEND</button>

untill the text is where you want it... although that might change the size of your button...

also you've got some nasty nesting in that code that IE will alow but i doubt any others will... i'd either put your <a> tag inside the <td>, or end it outside - this could be why your a tag isnt working

11-16-2002, 11:23 AM
That's what I was going to say. Also, use "cursor:pointer;cursor:hand;" instead of cursor:hand;
The 'hand' cursor is deprecated in CSS2 and replaced by 'pointer'.
To put it simple, IE6 wants 'pointer', IE5 needs the 'hand'.

11-16-2002, 11:33 AM
after looking a little more at your code... you're using the <button> tag anyway... couldnt you use:

<a href="http://google.co.uk">
<button ... ><img src="eyez.jpg">TELLAFRIEND</button>


11-16-2002, 09:45 PM
Got it...kinda.:rolleyes: I used your first suggestion which worked fine...but I can't get the a href working.

I'm also wondering if there's a way in IE5+ to call on most of this with a class and only changing the padding-left attribute inline. I know that IE6 will take style="this that" but IE5 only reads the last attribute (that). As usual, thanks :D

<td><a href="http://yahoo.com"><button style="background-image:url(eyez.gif);color:white;font:bold 12 verdana;cursor:hand;width:138;height:30;border:none;padding-left:40px;">TELLAFRIEND</button></a></td>

11-16-2002, 11:35 PM
...but I can't get the a href working.
More about the button here: http://www.javascriptkit.com/howto/button.shtml

11-17-2002, 12:16 AM
I can't use javascript because the search engines don't read it...and this doesn't work, either. Thanks

<td><button style="background-image:url(eyez.gif);color:white;font:bold 12 verdana;cursor:hand;width:138;height:30;border:none;padding-left:40px;"><a href="http://yahoo.com">TELLAFRIEND</a></button></td>

11-17-2002, 04:03 PM
couldnt you use javascript on the button anyway and then use an invisible link for the search engines?

<button ... onclick="window.location='http://google.co.uk';">Whatever</button>

<div style="visibility: hidden;">
<a href="http://google.co.uk">&nbsp;</a>

11-17-2002, 07:44 PM
Yes. Since buttons were made to fire off js, I could use your method or a site map. However, I've just remembered that these are mainly form buttons and, although I've tried an inline 'action=:http://yahoo.com' within the button itself, it should be declared within the form....for example <form action="http://yahoo.com"><button type="submit"></form>

Unfortunately, forms behave weirdly with extra padding and now, I can't get rid of it....even using style="margin;0;padding:0" so, I may just end up using the js after all.

One step forward, two steps back.

Thanks :D