Input submit button doesn't display background image in IE

Discussion in 'HTML & Website Design' started by rtc35, Jun 5, 2008.

0
  1. #1
    I added an input button (type=submit) to a form. This button gets its style from a CSS class that contains a background image. I've used this technique before without problems, but in the site I'm currently developing, the background image doesn't display in IE7 (Vista). Instead, it renders up some default button style. Firefox renders the image correctly. I tested the same class in a div tag and then it displayed fine in IE7. I can't see any significant difference between my older site that uses this technique successfully and the one currently under development.

    I even tried changing the document type definition to that of the old site (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">), but it didn't make a difference. I don't know where else to look for differences between these two sites.

    CSS:

    .btn_test
    {
    height: 45px;
    background-image: url(gradVert.jpg);
    background-repeat: repeat-x;
    border-style: none;
    display: block;
    cursor: pointer;
    }

    HTML:

    <input type="submit" name="someName" value="Save" id="someID" class="btn_test" />


    I have seen suggestions about using something like this: <input type="image" src="save.jpg" alt="Save" /> however, the text in the button isn't in the image itself, so I need the value attribute to contain the button's text.

    Can anybody help me to understand what could cause this change of behaviour? It would be greatly appreciated. Thanks.
     
    rtc35, Jun 5, 2008 IP
  2. rtc35

    rtc35 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I found the solution in another thread on this forum, which I missed somehow when searching earlier. I just had to add a border to the style containing my background image. The image is ignored by IE without the border. I don't want to see a border, but fortunately, including a 0px border still works. I simply changed

    border-style: none;

    to

    border: 0px solid #FFFFFF;
     
    rtc35, Jun 9, 2008 IP
  3. RoccoSiffredi

    RoccoSiffredi Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes! It really works. Thank you very much.
     
    RoccoSiffredi, Nov 15, 2010 IP
  4. moshecogan

    moshecogan Active Member

    Messages:
    265
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    Yes! It really works. Thank you very much.
     
    moshecogan, Nov 24, 2010 IP
  5. gaara_1203

    gaara_1203 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thank you. it working really.
     
    gaara_1203, Apr 6, 2011 IP
  6. jmort253

    jmort253 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    My <input type="submit" button using a CSS sprite for an image now works in all browsers down to IE7. Changing from border:none to border: 0px solid red; solved the problem.

    Thank you for asking your question and then following up by answering it so that the rest of the community can continue to benefit from your research. Thank you!

    James
     
    jmort253, May 29, 2011 IP
  7. Enursa

    Enursa Well-Known Member

    Messages:
    263
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    100
    Digital Goods:
    1
    #7
    Great. It saved my times.

    Thanks all.
     
    Enursa, Oct 14, 2011 IP
  8. snaker190

    snaker190 Active Member

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #8
    thank you this really work !!
     
    snaker190, Mar 9, 2012 IP