CSS Hover+Background Image -

-

i'm creating special ui control using html/css mimic windows 7 control panel buttons. far, i've got layout right , i'd add cosmetics it.

as seen here, there gradient appears when hover on button mouse.

http://m.cncfps.com/zack/files/this-control.png

now, can see here i've got layout done. i'd add :hover effect whole div item background image.

currently, here have css- yet doesn't work. no image shows in ie8, or firefox

edit: works in chrome, not in firefox or ie.

#cp .cp-item:hover {     background:url(images/hoverbg.png) repeat-x; }

it work background-color rather image.

  • there's nothing (relevant) wrong css.
  • the path image correct.

it works in chrome.

chrome seems more intelligent (or lenient) other browsers. if inspect page, it's inserting stuff:

enter image description here

it doesn't work in other browsers because don't have proper page structure (no doctype, no <html> tag, no <body> tag, etc) - page doesn't validate, , other browsers not "like it". don't know exact reason why doesn't work other browsers - imagine reason either implementation detail, or buried within w3 spec.

this works in "all browsers":

live demo
(i'm using <base> tag make paths work)

it's exact code, wrapped in typical boilerplate, addition of <base> tag.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <base href="http://toro.azwestern.edu/~zbl/" />  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head>  <body>  <link rel="stylesheet" href="style.css" type="text/css" />  <div id="cp">     <div class="cp-item"><span>         <div class="cp-item-icon"><img src="images/syssec.png" title="system , security" /></div>         <div class="cp-item-content">             <h4>system , security</h4>             <ul>                 <li><a href="#">item</a></li>                  <li><a href="#">item</a></li>                 <li><a href="#">item</a></li>                 <li><a href="#">item</a></li>                 <li><a href="#">item</a></li>                 <li><a href="#">item</a></li>             </ul>          </div>     </span></div> </div>  </body> </html>

Comments

Post a Comment

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

-
i trying send mail linux command line using mailx command. can send local domain no problem want set mail send gmail account receive mail sent gmail account. after configuring mail.rc so: account gmail { set smtp=smtps://smtp.gmail.com:587 set smtp-auth=login set smtp-auth-user=username@gmail.com set smtp-auth-password=password set ssl-verify=ignore } i error: resolving host smtp.gmail.com . . . done. connecting 74.125.25.109 . . . connected. missing "nss-config-dir" variable. "/home/username/dead.letter" 11/354 . . . message not sent. after looking "nss-config-dir" here , located certn.db , keyn.db files , added mail.rc so: account gmail { set smtp=smtps://smtp.gmail.com:587 set smtp-auth=login set smtp-auth-user=username@gmail.com set smtp-auth-password=password set ssl-verify=ignore set nss-config-dir=/home/user/.mozilla/firefox/location.default } now when try send mail using command: echo "sent gmail account" | mailx -v -a
Read more

c# - Is it possible to remove an existing registration from Autofac container builder? -

-
something along lines: builder.registertype<mytype>().as<itype>(); builder.registertype<mytype2>().as<itype>(); builder.deregistertype<mytype>().as<itype>() var container = builder.build(); var types = container.resolve<ienumerable<itype>>(); assert.istrue(types.count == 1); assert.istrue(types[0].gettype == typeof(mytype2)); scenario: go through bunch of assemblies , go register types want make sure have 1 implementation of given type. need before create container. track on own nice if autofac me bit. this cannot done directly using containerbuilder , unless start on new one. mind you, having first built container should able construct new container filtering away unwanted types , reusing registrations first container. this: ... var container = builder.build(); builder = new containerbuilder(); var components = container.componentregistry.registrations .where(cr => cr.activator.limittype != typ
Read more

php - Mysql PK and FK char(36) vs int(10) -

-
i have read mysql can handle indexes , searches better if tables keys integers rather char(36) uuid's. is worth converting int(10)? note: use 1 server , have have plans use multiple databases concurrently therefore removing 1 of big reasons using uuid. our tables innodb if makes difference. thanks in advance. usually rdbms can handle integer keys pk more efficient, other datatypes. reason how build index column, yes: long dont require string (or other typed) keys, should use integers. however: char(36) , int(10) far away being equal, because int(10) much smaller, char(36). dont know, if require many different keys, should keep in mind. update, complete last paragraph: int(10) 32-bit, char(36) 36 - ^byte^ (= 288-bit). not mean, int consumes less space, means, char(36) has 4 times more different keys.
Read more