CSS Image Replace Submit button problem

Discussion in 'CSS' started by mikemdg, Jul 4, 2011.

  1. #1
    Hi, I tried to do an image replace for a "submit" button and it's working for most people but I have one user in IE8 saying they just get a blank white button with no image (the path is correct, they can see it when going directly). The other thing is, I cannot see the submit button at all on my blackberry smartphone.

    Does this code look correct?

    THE STYLING

    <style type="text/css">
    input.uploadbutton
      {
      background-image: url(images/submit-button.jpg);
      cursor:pointer;
      width: 92px;
      height: 65px;
      border: none;
      }
    </style>
    Code (markup):
    THE BUTTON

    <input type="hidden" name="submit" value="true" />
    <input type="submit" value="" class="uploadbutton" />
    Code (markup):
     
    mikemdg, Jul 4, 2011 IP
  2. Projekt.Gopher

    Projekt.Gopher Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try putting a slash before "images" in the url
     
    Projekt.Gopher, Jul 4, 2011 IP
  3. akshat.gl

    akshat.gl Member

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Try putting style in external stylesheet. Also, as a good coding practice, always provide a alternate color for background when using images. This will help users like the above you mentioned who can not view the image.
     
    akshat.gl, Jul 4, 2011 IP
  4. jackburd

    jackburd Active Member

    Messages:
    396
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #4
    jackburd, Jul 4, 2011 IP
  5. jackburd

    jackburd Active Member

    Messages:
    396
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #5
    by the way...
    use this:

    border: 0 none;
    instead of this:
    border: none;
     
    jackburd, Jul 4, 2011 IP
  6. mikemdg

    mikemdg Member

    Messages:
    68
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #6
    Thanks! Seems like following your example worked better. I think it was the background: vs background-image:
     
    mikemdg, Jul 5, 2011 IP