button image not showing up in IE

Discussion in 'HTML & Website Design' started by deepman007, May 3, 2008.

0
  1. #1
    Hi

    why is it that the button images show up in firefox, opera, safari and not IE 7 or 6 for the following code?
    <input name="button" class="subscribe" type="submit" value="">
    Code (markup):
    input.subscribe{
   
   height: 15px;
   width: 80px;
   margin: 0 0 0 4px;
   padding: 0;
   border: none;
   background-image:url(../images/subscribe.gif);
   cursor: pointer;
}
    Code (markup):

     
    deepman007, May 3, 2008 IP
  2. hajagha

    hajagha Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I copied your code and it works with IE as well as FF. what's wrong with it ?
     
    hajagha, May 3, 2008 IP
  3. James Gober

    James Gober Guest

    Messages:
    40
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    be more helpful if you would provide the full markup and style sheet or at least link us to it because the problem could be somewhere else in your code..
     
    James Gober, May 3, 2008 IP
  4. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi

    Here's the code 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style  type="text/css">
.newsletter{
    position: absolute;
	left: 125px;
	top: 0;
	height: 15px;
	width: 170px;
	padding: 0;
	margin:0;
}
.newsletter input.test{
   position: absolute;
   top: 0;
   left: 0;
   margin:0;
   padding: 0;  
   height: 11px;
   width: 100px;
   font-size:10px;
 
}
.newsletter input.subscribe{
   position: absolute;
   top: 0;
   left: 100px;
   height: 15px;
   width: 60px;
   margin: 0 0 0 4px;
   padding: 0;
   font-size: 9px;
   border: none;
   background-image: url(images/button.gif);
   cursor: pointer;
}

</style>
</head>

<body>

<div class="newsletter">
                <input class="test" type="text" name="email" size="20" >
               <input name="button" class="subscribe" type="submit" value=""> 
      </div> 
</body>
</html>
    Code (markup):
    Here's the linkhttp://www.ahzhou.com/button/button.html
     
    deepman007, May 5, 2008 IP
  5. apmsolutions

    apmsolutions Peon

    Messages:
    66
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I am not sure about the original code, but in the full page code you have provided, the image does not exist.

    background-image: url(images/button.gif);

    should be

    background-image: url(images/subscribe.gif);
     
    apmsolutions, May 5, 2008 IP
  6. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks for noticing it. After I correct it, it still doesnt show up in IE 7

    Any reasons ?
     
    deepman007, May 5, 2008 IP
  7. sentuken

    sentuken Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hey, I figured it out for you.

    For .newsletter input.test, add:
    
border: 1px solid #ccc; /* Feel free to edit the color. */
    Code (markup):
    Must specify border in explorer, otherwise nothing shows up. Firefox and Opera automatically add a border, causing this 'issue.'

    For .newsletter input.subscribe, replace:

    background-image: url(images/subscribe.gif);
    Code (markup):
    with:

    background: url(images/subscribe.gif) no-repeat 0 0;
    Code (markup):
    Goodluck to you! :)
     
    sentuken, May 5, 2008 IP
  8. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thank you very much! you are the man!
     
    deepman007, May 6, 2008 IP