SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    submit button image with ie

    Dear Friends,

    I am working on a site these days, I want to use one image in submit button .I did that but it is not working in ie ... it works fine with firefox ...but it does work in ie.

    this is what I did.

    <tr class="input_text" align="right">

    <td class="but_td"> <input class="but" type="submit" value="&nbsp;"/></td>
    </tr>

    .but{background-image:url(../../images_slice/sign-button.gif); background-repeat:no-repeat;border:none; width:115px;height:34px;}
    .but_td{margin-right:20px;width:115px;height:34px; margin-top:-2px; border:none;}

    kindly help

    Noddy

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You can change the input type to "image" if you want an image as a button:

    Code:
    <input type="image" src="submit.jpg"
        alt="Submit your details"/>
    More info

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vaibhavcoder View Post
    Dear Friends,

    I am working on a site these days, I want to use one image in submit button .I did that but it is not working in ie ... it works fine with firefox ...but it does work in ie.

    this is what I did.

    <tr class="input_text" align="right">

    <td class="but_td"> <input class="but" type="submit" value="&nbsp;"/></td>
    </tr>

    .but{background-image:url(../../images_slice/sign-button.gif); background-repeat:no-repeat;border:none; width:115px;height:34px;}
    .but_td{margin-right:20px;width:115px;height:34px; margin-top:-2px; border:none;}

    kindly help

    Noddy
    You shouldn't remove the text from the value attribute of the submit button as that makes it unusable for screenreaders.

    Here's an accessible way to do it. It also works with images off as the submit button is placed over the label text. You can read more in this thread.


Tags for this Thread

Bookmarks

Posting Permissions

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