Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image button text w/o JS

    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>
    </tr>

    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by redhead; 11-16-2002 at 11:22 AM.
    redhead

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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'.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    </a>

    ?
    redhead

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Got it...kinda. 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

    <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>
    Last edited by zoobie; 11-16-2002 at 10:04 PM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...but I can't get the a href working.
    More about the button here: http://www.javascriptkit.com/howto/button.shtml

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Re: Image button text w/o JS

    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>
    Last edited by zoobie; 11-17-2002 at 01:41 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    couldnt you use javascript on the button anyway and then use an invisible link for the search engines?

    Code:
    <button ... onclick="window.location='http://google.co.uk';">Whatever</button>
    
    <div style="visibility: hidden;">
    <a href="http://google.co.uk">&nbsp;</a>
    </div>
    redhead

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by zoobie; 11-17-2002 at 08:27 PM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •