Databases
StackOverflow2013
Postsdbo
POCSS Button Background-Image not Working in IE9
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Button Background-Image not Working in IE9
    text
    copied!<p><strong>Hi</strong> there, I have a website <a href="http://thetotempole.ca" rel="nofollow">here!</a> And I have a search box with a submit button that has a background-image of a small magnifying glass. The background image works in chrome and firefox but doesn't seem to work in IE9. How can I fix this? Thanks!!</p> <p>HTML:</p> <pre><code>&lt;!doctype html&gt; &lt;head&gt; &lt;title&gt;The Totem Pole News&lt;/title&gt; &lt;meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news."&gt; &lt;link href="thecss.css" rel="stylesheet" type="text/css"&gt; &lt;script type="text/javascript" src="https://apis.google.com/js/plusone.js"&gt;&lt;/script&gt; &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script&gt;(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));&lt;/script&gt; &lt;div id="socialmediaplugins"&gt; &lt;div id="facebook"&gt;&lt;div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"&gt;&lt;/div&gt;&lt;/div&gt; &lt;div id="twitter"&gt;&lt;a href="https://twitter.com/share" class="twitter-share-button"&gt;Tweet&lt;/a&gt;&lt;/div&gt; &lt;g:plusone&gt;&lt;/g:plusone&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;div id="contentbox" align="Center"&gt; &lt;div id="banner" align="Center"&gt; &lt;/div&gt; &lt;div id="navbar"&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt; &lt;a href="#"&gt;Link 2&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;/div&gt; &lt;div id="navbar2"&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt; &lt;a href="#"&gt;Link 2&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;/div&gt; &lt;!-- Atomz HTML for Search --&gt; &lt;div id="searchbar"&gt; &lt;form method="get" action="http://search.atomz.com/search/"&gt; &lt;input type="hidden" name="sp_a" value="sp1005092e"&gt; &lt;input size="10" name="sp_q"&gt; &lt;input class="css_btn_class" type="submit" value=""&gt; &lt;input type="hidden" name="sp_p" value="all"&gt; &lt;input type="hidden" name="sp_f" value="UTF-8"&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="testtext"&gt; &lt;p&gt; Helloooo&lt;/p&gt; &lt;/div&gt; &lt;!-- This is the end of the contentbox --&gt; &lt;/div&gt; &lt;!-- This is the end of the container div --&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>body { margin-bottom:0px; background-color:#333; } #container { width: 1100px; height:1000px; position:relative; margin-right: auto; margin-left: auto; z-index:1; } #facebook { position:fixed; right:100px; z-index:15; } #twitter { position:fixed; z-index:16; right:120px; } #google { position:fixed; top:7px; right: 135px; } #socialmediaplugins { text-align: right; position: fixed; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */ margin: 0px; top: 0px; left: 0px; right: 0px; z-index:14; } #contentbox { background-color:#f6f301; width: 1100px; height: 1000px; box-shadow:2px 2px 10px 10px #060606; -webkit-box-shadow:2px 2px 10px 10px #060606; -moz-box-shadow:2px 2px 10px 10px #060606; /* For IE&lt;9 */ filter: progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2); } #banner { background-image:url(images/totempolebanner.gif); position:absolute; top:25px; width:768px; height:120px; left:166px; } #navbar { float:left; position:absolute; top: 175px; left:70px; } #navbar2 { position: absolute; top:175px; left: 815px; } #searchbar { position: absolute; top: 23px; left: 945px; } #testtext { position: absolute; left: 263px; top: 327px; } .css_btn_class { font-size:9px; position: relative; top:3px; right:4px; width:25px; height:25px; font-family:Verdana; font-weight:normal; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; border:1px solid #35d914; padding:7px 24px; text-decoration:none; background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) ); background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% ); background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9d00', endColorstr='#ffe711'); background-color:#ff9d00; color:#ff0000; display:inline-block; text-shadow:0px 0px 1px #117cff; -webkit-box-shadow: 0px 0px 0px 0px #117cff; -moz-box-shadow: 0px 0px 0px 0px #117cff; box-shadow: 0px 0px 0px 0px #117cff; background-image: url(images/unnamed.gif); background-repeat:no-repeat; background-position:center; }.css_btn_class:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) ); background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% ); background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe711', endColorstr='#ff9d00'); background-color:#ffe711; background-image: url(images/unnamed.gif); background-repeat:no-repeat; background-position:center; }.css_btn_class:active { position:relative; top:1px; background-image: url(images/unnamed.gif); background-repeat:no-repeat; background-position:center; } /* This css button was generated by css-button-generator.com */ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload