javascript - how to use background-position in right way? -

-

i use css sprite render emojis. jsfiddle demo, have problem background-position attribute, demo show, emojis same. had set background-position show second images in whole emojis image. doesn't work. don't know why. can give me advice.

li {    list-style: none;  }    ul {    margin: 0;    height: 0;  }    {    color: #5188a6;    text-decoration: none;    cursor: pointer;  }    .smile-bg {    top: 34px;    left: 0;    clear: both;    width: 386px;    height: 176px;    padding: 12px;    background-color: #f5f5f5;    border: 1px solid #dcdcdc;  }    .simle-box {    width: 386px;    height: 140px;    padding: 0px;  }    .simle-box li {    width: 36px;    height: 36px;    float: left;    margin: -1px 0 0 -1px;    padding: 0;    border-bottom: 0;    background: blue;  }    .smile1 {    background-position: -34px 0;  }    .simle-box li {    background: url('http://www.smzdm.com/resources/public/img/static.gif') no-repeat;    width: 34px;    height: 34px;    display: block;    border: 1px solid #dcdcdc;    background-color: #fff;  }    .smile-page {    text-align: right;    width: 384px;    line-height: 24px;    padding-top: 12px;  }    .smile-page {    display: inline-block;    font-size: 12px;    width: 24px;    height: 24px;    margin-left: 10px;    text-align: center;    border-radius: 2px;  }    .current {    background-color: #f04848;    color: #fff;    font-weight: bold;  }    /*# sourcemappingurl=style.css.map */
    <body>          <textarea name="saytext" id="saytext" rows="8" cols="40"></textarea>      <div class="smile-bg">          <ul class="simle-box">              <li><a class="smile0" href="#"></a></li>              <li><a class="smile1" href="#"></a></li>              <li><a class="smile2" href="#"></a></li>              <li><a class="smile3" href="#"></a></li>              <li><a class="smile4" href="#"></a></li>              <li><a class="smile5" href="#"></a></li>              <li><a class="smile6" href="#"></a></li>              <li><a class="smile7" href="#"></a></li>              <li><a class="smile8" href="#"></a></li>              <li><a class="smile9" href="#"></a></li>              <li><a class="smile10" href="#"></a></li>              <li><a class="smile11" href="#"></a></li>              <li><a class="smile12" href="#"></a></li>              <li><a class="smile13" href="#"></a></li>              <li><a class="smile14" href="#"></a></li>              <li><a class="smile15" href="#"></a></li>              <li><a class="smile16" href="#"></a></li>              <li><a class="smile17" href="#"></a></li>              <li><a class="smile18" href="#"></a></li>              <li><a class="smile19" href="#"></a></li>              <li><a class="smile20" href="#"></a></li>              <li><a class="smile21" href="#"></a></li>              <li><a class="smile22" href="#"></a></li>              <li><a class="smile23" href="#"></a></li>              <li><a class="smile24" href="#"></a></li>              <li><a class="smile25" href="#"></a></li>              <li><a class="smile26" href="#"></a></li>              <li><a class="smile27" href="#"></a></li>              <li><a class="smile28" href="#"></a></li>              <li><a class="smile29" href="#"></a></li>              <li><a class="smile30" href="#"></a></li>              <li><a class="smile31" href="#"></a></li>              <li><a class="smile32" href="#"></a></li>              <li><a class="smile33" href="#"></a></li>              <li><a class="smile34" href="#"></a></li>              <li><a class="smile35" href="#"></a></li>              <li><a class="smile36" href="#"></a></li>              <li><a class="smile37" href="#"></a></li>              <li><a class="smile38" href="#"></a></li>              <li><a class="smile39" href="#"></a></li>              <li><a class="smile40" href="#"></a></li>              <li><a class="smile41" href="#"></a></li>              <li><a class="smile42" href="#"></a></li>              <li><a class="smile43" href="#"></a></li>          </ul>          <div class="smile-page">              <a href="#" class="current">1</a>              <a href="#">2</a>          </div>      </div>      </body>

it's not problem of background-position, it's .simle-box li a more specific .smile1, rule being overwritten.

if follows, you'll see difference.

.simle-box .smile1 {   background-position: -34px 0; }

updated fiddle: http://jsfiddle.net/2hds8m9t/


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more